Merge pull request #119 from HyperloopUPV-H8/ethernet-view/load-files

[ethernet-view] Load files logic

Author: andresdlt03

ethernet-view/package-lock.json

@@ -20,6 +20,7 @@
         "lightweight-charts": "^4.1.2",
         "lodash": "^4.17.21",
         "nanoid": "^4.0.2",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.6.0",
@@ -39,6 +40,7 @@
         "@types/events": "^3.0.0",
         "@types/lodash": "^4.14.191",
         "@types/node": "^18.11.9",
+        "@types/papaparse": "^5.3.14",
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.8",
         "@types/react-virtualized-auto-sizer": "^1.0.1",

ethernet-view/package.json

@@ -4,7 +4,7 @@ import { lightenHSL } from "utils/color";
 
 type Props = {
     label: string;
-    onClick: (ev: React.MouseEvent) => void;
+    onClick?: (ev: React.MouseEvent) => void;
     disabled?: boolean;
     color?: string;
     className?: string;
@@ -13,7 +13,7 @@ type Props = {
 export const Button = ({
     label,
     color = "hsl(29, 88%, 57%)",
-    onClick,
+    onClick = () => {},
     disabled,
     className = "",
 }: Props) => {

ethernet-view/src/assets/svg/close-folder.svg

@@ -13,11 +13,34 @@ export type SplitElement = {
     minLength: number;
 };
 
-export function useSplit(minLengths: number[], direction: Orientation) {
+/**
+ * The `useSplit` function in TypeScript is used to manage resizable elements with specified initial
+ * lengths and minimum lengths in a given direction.
+ * @param {number[] | undefined} initialLengths - The `initialLengths` parameter is an array of numbers
+ * representing the initial lengths of the elements to be split. It can be either `undefined` or an
+ * array of numbers. If it is `undefined`, if its length is not equal to the length of the
+ * `minLengths` array or if its sum is not equal to 1, the `initialLengths` will be set proportionally equal.
+ * @param {number[]} minLengths - The `minLengths` parameter in the `useSplit` function represents an
+ * array of minimum lengths for each split element. These minimum lengths determine the smallest size
+ * each element can be resized to. If a user tries to resize an element below its minimum length, the
+ * element will be collapsed.
+ * @param {Orientation} direction - The `direction` parameter in the `useSplit` function is used to
+ * determine the orientation of the split elements. It is of type `Orientation`, which is likely an
+ * enum or type that specifies whether the split should be horizontal or vertical. This helps in
+ * calculating the resizing of elements based on the direction
+ * @returns The `useSplit` function returns an array containing the `elements` state and the
+ * `handleMouseDown` function from the `separatorEventHandler`.
+ */
+export function useSplit(minLengths: number[], direction: Orientation, initialLengths?: number[]) {
+
+    if(!initialLengths || initialLengths.length != minLengths.length || initialLengths.reduce((prev, curr) => prev + curr, 0) != 1) {
+        initialLengths = minLengths.map(() => 1 / minLengths.length);
+    }
+
     const [elements, setElements] = useState<SplitElement[]>(
-        minLengths.map((minLength) => ({
-            length: 1 / minLengths.length,
-            minLength: minLength,
+        initialLengths.map((length, index) => ({
+            length,
+            minLength: minLengths[index],
         }))
     );
 

ethernet-view/src/components/FormComponents/Button/Button.tsx

@@ -11,12 +11,13 @@ type Props = {
         collapsedIcon: string;
     }[];
     orientation?: Orientation;
+    initialLengths?: number[];
 };
 
-export const SplitLayout = ({ components, orientation = Orientation.HORIZONTAL }: Props) => {
+export const SplitLayout = ({ initialLengths, components, orientation = Orientation.HORIZONTAL }: Props) => {
 
-    const minSizes = components.map(() => 0.05);
-    const [splitElements, onSeparatorMouseDown] = useSplit(minSizes, orientation);
+    const minLengths = components.map(() => 0.05);
+    const [splitElements, onSeparatorMouseDown] = useSplit(minLengths, orientation, initialLengths);
 
     return (
         <div

ethernet-view/src/hooks/useSplit/useSplit.ts

@@ -0,0 +1,13 @@
+.LoggerPage {
+    display: flex;
+    width: 100%;
+    gap: 1rem;
+}
+
+.LogsColumn {
+    flex: 1;
+}
+
+.ChartsColumn {
+    flex: 3;
+}

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

@@ -1,18 +1,21 @@
-import { Orientation } from "hooks/useSplit/Orientation";
-import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
 import { ChartsColumn } from "pages/LoggerPage/ChartsColumn/ChartsColumn";
-import chart from "assets/svg/chart.svg"
+import { LogsColumn } from "./LogsColumn/LogsColumn";
+import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
 
 export const LoggerPage = () => {
     return (
-        <SplitLayout
+        <SplitLayout 
             components={[
                 {
-                    component: <ChartsColumn />,
-                    collapsedIcon: chart,
+                    component: <LogsColumn />,
+                    collapsedIcon: ""
                 },
+                {
+                    component: <ChartsColumn />,
+                    collapsedIcon: ""
+                }
             ]}
-            orientation={Orientation.HORIZONTAL}
-        ></SplitLayout>
+            initialLengths={[0.3, 0.7]}
+        />
     );
 };

ethernet-view/src/pages/LoggerPage/LoggerPage.module.scss

@@ -0,0 +1,13 @@
+.controlsWrapper {
+    width: 100%;
+    display: flex;
+    padding: 1rem;
+    gap: 2rem;
+}
+
+.button {
+    flex: 1;
+    padding: 0.2rem;
+    font-size: large;
+    border-style: none;
+}

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

@@ -0,0 +1,30 @@
+import { Button } from "components/FormComponents/Button/Button"
+import styles from "./Controls.module.scss"
+import { UploadInformation, UploadState } from "../../LogLoader";
+
+type Props = {
+    uploadInformation: UploadInformation;
+    onLoad: () => void;
+    onRemove: () => void;
+}
+
+export const Controls = ({uploadInformation, onLoad, onRemove}: Props) => {
+    return (
+        <div className={styles.controlsWrapper}>
+
+            <Button 
+                label="Load"
+                color="#317ae7"
+                disabled={uploadInformation.state !== UploadState.SUCCESS}
+                onClick={() => onLoad()}
+            />
+
+            <Button
+                label="Remove"
+                disabled={uploadInformation.state !== UploadState.SUCCESS && uploadInformation.state !== UploadState.ERROR}
+                onClick={() => onRemove() }
+            />
+
+        </div>
+    )
+}