From 72874785fe416e1c99a78e4659818f70ad0d35b5 Mon Sep 17 00:00:00 2001
From: gokhangunduz <me@gokhangunduz.com.tr>
Date: Fri, 12 Jan 2024 15:29:23 +0300
Subject: [PATCH] feat(version): release 0.30.3 version

---
 package.json                                  |  2 +-
 public/css/style.css                          | 84 +++++++++++--------
 .../BarcodeFinder/BarcodeFinder.tsx           | 10 +--
 .../BarcodeManagementButton.tsx               | 20 +++++
 .../BarcodeManagementControls.tsx}            | 30 +++----
 src/contexts/BarcodeContext.tsx               | 55 +++++++++++-
 src/interfaces/barcodeInterfaces.ts           | 12 +++
 src/layouts/TaskManagementLayout.tsx          |  6 +-
 .../TaskManagement/BarcodeManagement.tsx      | 24 +++---
 .../TaskManagement/BarcodeManagement2D.tsx    |  4 +-
 .../TaskManagement/BarcodeManagement3D.tsx    | 14 ++--
 11 files changed, 183 insertions(+), 78 deletions(-)
 create mode 100644 src/components/BarcodeManagementButton/BarcodeManagementButton.tsx
 rename src/components/{BarcodeModeToggle/BarcodeModeToggle.tsx => BarcodeManagementControls/BarcodeManagementControls.tsx} (62%)
 create mode 100644 src/interfaces/barcodeInterfaces.ts

diff --git a/package.json b/package.json
index 324048e2..e7168d80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",
diff --git a/public/css/style.css b/public/css/style.css
index d106c6ce..2aea04a5 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -917,6 +917,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -945,10 +949,6 @@ video {
   margin-top: 0.1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -989,6 +989,10 @@ video {
   height: 7rem !important;
 }
 
+.\!h-6 {
+  height: 1.5rem !important;
+}
+
 .\!h-60 {
   height: 15rem !important;
 }
@@ -997,6 +1001,10 @@ video {
   height: 2rem !important;
 }
 
+.\!h-80 {
+  height: 20rem !important;
+}
+
 .\!h-9 {
   height: 2.25rem !important;
 }
@@ -1123,10 +1131,6 @@ video {
   height: 3px;
 }
 
-.h-\[40rem\] {
-  height: 40rem;
-}
-
 .h-\[42rem\] {
   height: 42rem;
 }
@@ -1157,16 +1161,28 @@ video {
   height: 100vh;
 }
 
-.\!h-7 {
-  height: 1.75rem !important;
+.max-h-\[40rem\] {
+  max-height: 40rem;
 }
 
-.\!h-6 {
-  height: 1.5rem !important;
+.\!max-h-full {
+  max-height: 100% !important;
 }
 
-.max-h-\[40rem\] {
-  max-height: 40rem;
+.\!max-h-fit {
+  max-height: -webkit-fit-content !important;
+  max-height: -moz-fit-content !important;
+  max-height: fit-content !important;
+}
+
+.\!max-h-min {
+  max-height: -webkit-min-content !important;
+  max-height: min-content !important;
+}
+
+.\!max-h-max {
+  max-height: -webkit-max-content !important;
+  max-height: max-content !important;
 }
 
 .min-h-4 {
@@ -1177,6 +1193,10 @@ video {
   min-height: 1.25rem;
 }
 
+.min-h-9 {
+  min-height: 2.25rem;
+}
+
 .min-h-\[40rem\] {
   min-height: 40rem;
 }
@@ -1185,10 +1205,6 @@ video {
   min-height: 100vh;
 }
 
-.min-h-9 {
-  min-height: 2.25rem;
-}
-
 .\!w-24 {
   width: 6rem !important;
 }
@@ -1394,10 +1410,6 @@ video {
   width: max-content;
 }
 
-.\!w-60 {
-  width: 15rem !important;
-}
-
 .w-80 {
   width: 20rem;
 }
@@ -1414,6 +1426,10 @@ video {
   min-width: 9rem;
 }
 
+.min-w-9 {
+  min-width: 2.25rem;
+}
+
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -1433,10 +1449,6 @@ video {
   min-width: max-content;
 }
 
-.min-w-9 {
-  min-width: 2.25rem;
-}
-
 .max-w-fit {
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
@@ -2407,6 +2419,10 @@ video {
   padding-left: 1.5rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -2447,14 +2463,6 @@ video {
   padding-top: 2rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2820,6 +2828,14 @@ video {
   opacity: 0.9;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .\!shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
diff --git a/src/components/BarcodeFinder/BarcodeFinder.tsx b/src/components/BarcodeFinder/BarcodeFinder.tsx
index 3f5d0d5a..38af40b8 100644
--- a/src/components/BarcodeFinder/BarcodeFinder.tsx
+++ b/src/components/BarcodeFinder/BarcodeFinder.tsx
@@ -1,7 +1,7 @@
 import { ReactElement, useState } from "react";
-import { PiMagnifyingGlassBold } from "react-icons/pi";
 import InputText from "../InputText/InputText";
 import useBarcode from "../../hooks/useBarcode";
+import { BsSearch } from "react-icons/bs";
 
 export default function BarcodeFinder(): ReactElement {
   const [isActiveFinder, setIsActiveFinder] = useState<boolean>(false);
@@ -10,13 +10,13 @@ export default function BarcodeFinder(): ReactElement {
 
   return (
     <div
-      className={`transition-500 flex items-center justify-between gap-4 rounded bg-light-100  ${
-        isActiveFinder ? "w-68 pr-2" : "w-fit"
+      className={`transition-500 flex cursor-pointer items-center justify-between gap-2 rounded border border-light-300 bg-light-50 opacity-60 hover:bg-light-100  ${
+        isActiveFinder ? "w-80 pr-2" : "w-fit"
       }`}
     >
       <div className="flex min-h-9 min-w-9 items-center justify-center">
-        <PiMagnifyingGlassBold
-          size={20}
+        <BsSearch
+          size={15}
           onClick={() => {
             setIsActiveFinder(!isActiveFinder);
             setFindBarcodeInput("");
diff --git a/src/components/BarcodeManagementButton/BarcodeManagementButton.tsx b/src/components/BarcodeManagementButton/BarcodeManagementButton.tsx
new file mode 100644
index 00000000..e0bd39e9
--- /dev/null
+++ b/src/components/BarcodeManagementButton/BarcodeManagementButton.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+
+interface IBarcodeManagementButton {
+  icon: ReactElement;
+  onClick: () => void;
+}
+
+export default function BarcodeManagementButton({
+  icon,
+  onClick,
+}: IBarcodeManagementButton): ReactElement {
+  return (
+    <div
+      className="transition-500 flex h-9 w-9 cursor-pointer items-center justify-center rounded border border-light-300 bg-light-50 opacity-60 hover:bg-light-100"
+      onClick={onClick}
+    >
+      {icon}
+    </div>
+  );
+}
diff --git a/src/components/BarcodeModeToggle/BarcodeModeToggle.tsx b/src/components/BarcodeManagementControls/BarcodeManagementControls.tsx
similarity index 62%
rename from src/components/BarcodeModeToggle/BarcodeModeToggle.tsx
rename to src/components/BarcodeManagementControls/BarcodeManagementControls.tsx
index 9a5b20ca..5deef1ad 100644
--- a/src/components/BarcodeModeToggle/BarcodeModeToggle.tsx
+++ b/src/components/BarcodeManagementControls/BarcodeManagementControls.tsx
@@ -3,6 +3,8 @@ import { BsFullscreen } from "react-icons/bs";
 import useBarcode from "../../hooks/useBarcode";
 import saveAs from "file-saver";
 import BarcodeFinder from "../BarcodeFinder/BarcodeFinder";
+import BarcodeManagementButton from "../BarcodeManagementButton/BarcodeManagementButton";
+import { PiExport } from "react-icons/pi";
 
 interface IBarcodeModeToggle {
   handleFullScreen: any;
@@ -26,25 +28,23 @@ export default function BarcodeModeToggle({
 
   return (
     <div className="absolute bottom-4 left-4 flex flex-col gap-4">
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      <BarcodeManagementButton
+        icon={
+          <span className="text-sm">{activeTab === "2D" ? "3D" : "2D"}</span>
+        }
         onClick={() => setActiveTab(activeTab === "2D" ? "3D" : "2D")}
-      >
-        {activeTab === "2D" ? "3D" : "2D"}
-      </div>
+      />
 
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      <BarcodeManagementButton
+        icon={<BsFullscreen size={20} />}
         onClick={handleFullScreen.enter}
-      >
-        <BsFullscreen size={20} />
-      </div>
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      />
+
+      <BarcodeManagementButton
+        icon={<PiExport size={20} />}
         onClick={handleExportJSON}
-      >
-        E
-      </div>
+      />
+
       <BarcodeFinder />
     </div>
   );
diff --git a/src/contexts/BarcodeContext.tsx b/src/contexts/BarcodeContext.tsx
index d6185b02..19b333bb 100644
--- a/src/contexts/BarcodeContext.tsx
+++ b/src/contexts/BarcodeContext.tsx
@@ -1,6 +1,7 @@
 import { createContext, useEffect, useState } from "react";
 import useRobot from "../hooks/useRobot";
 import ROSLIB from "roslib";
+import { IBarcodeItem } from "../interfaces/barcodeInterfaces";
 
 export const BarcodeContext: any = createContext<any>(null);
 
@@ -17,7 +18,7 @@ export default ({ children }: any) => {
     y: 0,
     z: 0,
   });
-  const [barcodeItems, setBarcodeItems] = useState<any[]>([]);
+  const [barcodeItems, setBarcodeItems] = useState<IBarcodeItem[]>([]);
 
   useEffect(() => {
     const barcodes = new ROSLIB.Topic({
@@ -30,8 +31,9 @@ export default ({ children }: any) => {
       barcodes.subscribe(function ({ data }: any) {
         const message = JSON.parse(data);
 
-        setBarcodeItems((prevData: any) => [...prevData, message]);
+        barcodeClustering(message);
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ros]);
 
   useEffect(() => {
@@ -72,6 +74,55 @@ export default ({ children }: any) => {
     return Math.atan2(siny_cosp, cosy_cosp);
   }
 
+  function barcodeClustering(newBarcode: IBarcodeItem) {
+    const clusteringScale = 0.3;
+
+    setBarcodeItems((prevData: IBarcodeItem[]) => {
+      if (prevData.length > 0) {
+        const lastItemWaypoint = {
+          x: Math.abs(prevData[prevData.length - 1]?.waypoint?.x),
+          y: Math.abs(prevData[prevData.length - 1]?.waypoint?.y),
+          z: Math.abs(prevData[prevData.length - 1]?.waypoint?.z),
+        };
+
+        const newItemWaypoint = {
+          x: Math.abs(newBarcode?.waypoint?.x),
+          y: Math.abs(newBarcode?.waypoint?.y),
+          z: Math.abs(newBarcode?.waypoint?.z),
+        };
+
+        const diff = {
+          x: Math.abs(lastItemWaypoint.x - newItemWaypoint.x),
+          y: Math.abs(lastItemWaypoint.y - newItemWaypoint.y),
+          z: Math.abs(lastItemWaypoint.z - newItemWaypoint.z),
+        };
+
+        if (diff.x < clusteringScale && diff.y < clusteringScale) {
+          return [
+            ...prevData,
+            {
+              robotId: newBarcode.robotId,
+              fleetId: newBarcode.fleetId,
+              sensorId: newBarcode.sensorId,
+              barcode: newBarcode.barcode,
+              waypoint: {
+                x: prevData[prevData.length - 1]?.waypoint?.x,
+                y: prevData[prevData.length - 1]?.waypoint?.y,
+                z: newBarcode.waypoint.z,
+                yaw: prevData[prevData.length - 1]?.waypoint?.yaw,
+              },
+            },
+          ];
+        } else {
+          return [...prevData, newBarcode];
+        }
+      } else {
+        // If barcodeItems is initially empty, just return the newBarcode in an array
+        return [newBarcode];
+      }
+    });
+  }
+
   return (
     <BarcodeContext.Provider
       value={{
diff --git a/src/interfaces/barcodeInterfaces.ts b/src/interfaces/barcodeInterfaces.ts
new file mode 100644
index 00000000..dacad67c
--- /dev/null
+++ b/src/interfaces/barcodeInterfaces.ts
@@ -0,0 +1,12 @@
+export interface IBarcodeItem {
+  robotId: string;
+  fleetId: string;
+  sensorId: string;
+  barcode: string;
+  waypoint: {
+    x: number;
+    y: number;
+    z: number;
+    yaw: number;
+  };
+}
diff --git a/src/layouts/TaskManagementLayout.tsx b/src/layouts/TaskManagementLayout.tsx
index 45725d72..450534d1 100644
--- a/src/layouts/TaskManagementLayout.tsx
+++ b/src/layouts/TaskManagementLayout.tsx
@@ -1,7 +1,7 @@
 import MissionManagement from "../pages/EnvironmentPage/TaskManagement/MissionManagement";
 import BarcodeManagement from "../pages/EnvironmentPage/TaskManagement/BarcodeManagement";
 import LayoutTabSwitcher from "../components/LayoutTabSwitcher/LayoutTabSwitcher";
-import { Fragment, ReactElement, useState } from "react";
+import { ReactElement, useState } from "react";
 import useRobot from "../hooks/useRobot";
 
 export default function TaskManagementLayout(): ReactElement {
@@ -12,7 +12,7 @@ export default function TaskManagementLayout(): ReactElement {
   >("Mission Management");
 
   return (
-    <Fragment>
+    <div className={"animate-fadeIn flex h-full flex-col gap-6"}>
       <LayoutTabSwitcher
         tabs={["Mission Management", "Barcode Management"]}
         activeTab={activeTab}
@@ -26,6 +26,6 @@ export default function TaskManagementLayout(): ReactElement {
             return <BarcodeManagement ros={ros} />;
         }
       })()}
-    </Fragment>
+    </div>
   );
 }
diff --git a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement.tsx b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement.tsx
index 37990946..48db64dd 100644
--- a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement.tsx
+++ b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement.tsx
@@ -1,9 +1,9 @@
 import { Fragment, ReactElement, useState } from "react";
-import CardLayout from "../../../layouts/CardLayout";
 import BarcodeManagement3D from "./BarcodeManagement3D";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import BarcodeManagement2D from "./BarcodeManagement2D";
-import BarcodeModeToggle from "../../../components/BarcodeModeToggle/BarcodeModeToggle";
+import BarcodeManagementControls from "../../../components/BarcodeManagementControls/BarcodeManagementControls";
+import Card from "../../../components/Card/Card";
 
 export default function BarcodeManagement({ ros }: any): ReactElement {
   const [activeTab, setActiveTab] = useState<"2D" | "3D">("3D");
@@ -11,8 +11,8 @@ export default function BarcodeManagement({ ros }: any): ReactElement {
   const handleFullScreen = useFullScreenHandle();
 
   return (
-    <CardLayout className="!relative h-[40rem]">
-      <FullScreen className="!relative h-full" handle={handleFullScreen}>
+    <Card className="relative">
+      <FullScreen className="relative h-full w-full" handle={handleFullScreen}>
         <Fragment>
           {activeTab === "2D" ? (
             <BarcodeManagement2D />
@@ -20,12 +20,16 @@ export default function BarcodeManagement({ ros }: any): ReactElement {
             <BarcodeManagement3D ros={ros} />
           )}
         </Fragment>
+        <BarcodeManagementControls
+          handleFullScreen={
+            handleFullScreen.active
+              ? handleFullScreen.exit
+              : handleFullScreen.enter
+          }
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+        />
       </FullScreen>
-      <BarcodeModeToggle
-        handleFullScreen={handleFullScreen}
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-      />
-    </CardLayout>
+    </Card>
   );
 }
diff --git a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement2D.tsx b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement2D.tsx
index 931e60d4..4cfc3a5d 100644
--- a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement2D.tsx
+++ b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement2D.tsx
@@ -19,7 +19,7 @@ export default function BarcodeManagement2D(): ReactElement {
           style={{
             backgroundRepeat: "repeat",
           }}
-          className="flex w-full items-center justify-center gap-10 "
+          className="animate-fadeIn flex w-full items-center justify-center gap-10"
         >
           {barcodeItems?.length
             ? barcodeItems?.map(
@@ -38,7 +38,7 @@ export default function BarcodeManagement2D(): ReactElement {
                                 backgroundSize: "contain",
                               }}
                             >
-                              <div className="border-light-800 flex h-10 w-full items-center justify-center border-[6px] bg-yellow-400">
+                              <div className="flex h-10 w-full items-center justify-center border-[6px] border-light-800 bg-yellow-400">
                                 {barcode ? (
                                   <Barcode
                                     fontSize={8}
diff --git a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement3D.tsx b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement3D.tsx
index 716219af..d4727a8d 100644
--- a/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement3D.tsx
+++ b/src/pages/EnvironmentPage/TaskManagement/BarcodeManagement3D.tsx
@@ -7,11 +7,13 @@ export default function App({ ros }: any) {
   const { barcodeItems } = useBarcode();
 
   return (
-    <Scene3D ros={ros}>
-      {barcodeItems?.map((barcodeItem: any, barcodeItemIndex: number) => {
-        return <Machine3D key={barcodeItemIndex} item={barcodeItem} />;
-      })}
-      <Robot3D />
-    </Scene3D>
+    <div className="animate-fadeIn absolute inset-0">
+      <Scene3D ros={ros}>
+        {barcodeItems?.map((barcodeItem: any, barcodeItemIndex: number) => {
+          return <Machine3D key={barcodeItemIndex} item={barcodeItem} />;
+        })}
+        <Robot3D />
+      </Scene3D>
+    </div>
   );
 }