split packets and charts tabs

Author: andresdlt03

ethernet-view/src/pages/HomePage/ChartsColumn/ChartsColumn.tsx

@@ -0,0 +1,31 @@
+import { TabLayout } from "layouts/TabLayout/TabLayout";
+import { ChartMenu } from "components/ChartMenu/ChartMenu";
+import { ReactComponent as Chart } from "assets/svg/chart.svg";
+import { useMemo } from "react";
+import { useMeasurementsStore, usePodDataStore, useSubscribe } from "common";
+import { createSidebarSections } from "components/ChartMenu/sidebar";
+
+export const ChartsColumn = () => {
+    const {podData, updatePodData} = usePodDataStore(state => ({podData: state.podData, updatePodData: state.updatePodData}))
+    const updateMeasurements = useMeasurementsStore(state => state.updateMeasurements)
+
+    useSubscribe("podData/update", (update) => {
+        updatePodData(update);
+        updateMeasurements(update);
+    });
+
+    const sections = useMemo(() => {
+        return createSidebarSections(podData);
+    }, []);
+
+    const chartsColumnTabItems = [
+            {
+                id: "charts",
+                name: "Charts",
+                icon: <Chart />,
+                component: <ChartMenu sidebarSections={sections} />,
+            },
+        ]
+
+    return <TabLayout items={chartsColumnTabItems}></TabLayout>;
+};

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

@@ -3,17 +3,23 @@ import { Orientation } from "hooks/useSplit/Orientation";
 import { ReceiveColumn } from "pages/HomePage/ReceiveColumn/ReceiveColumn";
 import { OrderColumn } from "pages/HomePage/OrderColumn/OrderColumn";
 import { MessagesColumn } from "pages/HomePage/MessagesColumn/MessagesColumn";
+import { ChartsColumn } from "./ChartsColumn/ChartsColumn";
 import styles from "pages/HomePage/HomePage.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"
 
 export const HomePage = () => {
     return (
         <div id={styles.wrapper}>
             <div id={styles.body}>
                 <SplitLayout
                     components={[
+                        {
+                            component: <ChartsColumn />,
+                            collapsedIcon: chart
+                        },
                         {
                             component: <ReceiveColumn />,
                             collapsedIcon: incomingMessage

ethernet-view/src/pages/HomePage/ReceiveColumn/ReceiveColumn.tsx

@@ -1,24 +1,10 @@
 import { TabLayout } from "layouts/TabLayout/TabLayout";
-import { ChartMenu } from "components/ChartMenu/ChartMenu";
 import { ReactComponent as IncomingMessage } from "assets/svg/incoming-message.svg";
-import { ReactComponent as Chart } from "assets/svg/chart.svg";
 import { ReceiveTable } from "components/ReceiveTable/ReceiveTable";
-import { useMemo } from "react";
-import { useMeasurementsStore, usePodDataStore, useSubscribe } from "common";
-import { createSidebarSections } from "components/ChartMenu/sidebar";
+import { usePodDataStore } from "common";
 
 export const ReceiveColumn = () => {
-    const {podData, updatePodData} = usePodDataStore(state => ({podData: state.podData, updatePodData: state.updatePodData}))
-    const updateMeasurements = useMeasurementsStore(state => state.updateMeasurements)
-
-    useSubscribe("podData/update", (update) => {
-        updatePodData(update);
-        updateMeasurements(update);
-    });
-
-    const sections = useMemo(() => {
-        return createSidebarSections(podData);
-    }, []);
+    const {podData} = usePodDataStore(state => ({podData: state.podData, updatePodData: state.updatePodData}))
 
     const receiveColumnTabItems = [
             {
@@ -29,12 +15,6 @@ export const ReceiveColumn = () => {
                     <ReceiveTable boards={podData.boards} />
                 ),
             },
-            {
-                id: "charts",
-                name: "Charts",
-                icon: <Chart />,
-                component: <ChartMenu sidebarSections={sections} />,
-            },
         ]
 
     return <TabLayout items={receiveColumnTabItems}></TabLayout>;