Feature/tour component

public/libs/potree/potree/potree.js

@@ -77732,7 +77732,7 @@ ENDSEC
       // $(".accordion > div").hide()
 
       // to open the, for example, tool menu, call:
-      // $("#menu_tools").next().show()
+      $("#menu_tools").next().show()
     }
 
     initAppearance() {

src/components/headerTab.tsx

@@ -13,11 +13,12 @@ const HeaderTab: FC<HeaderTabProps> = ({ items }) => {
     <div className="w-full h-24 flex items-center justify-center gap-8 mb-4">
       {items
         .filter((i) => i.active)
-        .map(({ key, action, label, icon }) => (
+        .map(({ key, action, label, icon, ref }) => (
           <div
             key={key}
+            ref={ref}
             onClick={action}
-            className="flex flex-col items-center justify-center gap-2 rounded-xl p-2 transition-all duration-300 cursor-pointer hover:bg-green hover:bg-opacity-15 active:opacity-50"
+            className={"flex flex-col items-center justify-center gap-2 rounded-xl p-2 transition-all duration-300 cursor-pointer hover:bg-green hover:bg-opacity-15 active:opacity-50"}
           >
             <img
               src={icon}

src/configs/providers.tsx

@@ -13,34 +13,40 @@ import { CentralizationProvider } from "../hooks/preProcessing/useCentralization
 import { AlignmentProvider } from "../hooks/preProcessing/useAlignment";
 import { NoiseAddProvider } from "../hooks/preProcessing/useNoiseAdd";
 import { EfficientRansacProvider } from "../hooks/processing/useEfficientRansac";
+import { InterfaceTourProvider } from "../hooks/useInterfaceTour";
+import { ApplicationStateProvider } from "../hooks/useApplicationState";
 
 // Props interface
 interface GlobalProviderProps {
   children: ReactNode;
 }
 
 const GlobalProviders: FC<GlobalProviderProps> = ({ children }) => (
-  <CloudProvider>
-    <CropBoxProvider>
-      <VoxelGridProvider>
-        <StatisticalRemovalProvider>
-          <NormalEstimationProvider>
-            <ReescaleProvider>
-              <CentralizationProvider>
-                <AlignmentProvider>
-                  <NoiseAddProvider>
-                    <EfficientRansacProvider>
-                      <StatusProvider>{children}</StatusProvider>
-                    </EfficientRansacProvider>
-                  </NoiseAddProvider>
-                </AlignmentProvider>
-              </CentralizationProvider>
-            </ReescaleProvider>
-          </NormalEstimationProvider>
-        </StatisticalRemovalProvider>
-      </VoxelGridProvider>
-    </CropBoxProvider>
-  </CloudProvider>
+  <ApplicationStateProvider>
+    <InterfaceTourProvider>
+      <CloudProvider>
+        <CropBoxProvider>
+          <VoxelGridProvider>
+            <StatisticalRemovalProvider>
+              <NormalEstimationProvider>
+                <ReescaleProvider>
+                  <CentralizationProvider>
+                    <AlignmentProvider>
+                      <NoiseAddProvider>
+                        <EfficientRansacProvider>
+                          <StatusProvider>{children}</StatusProvider>
+                        </EfficientRansacProvider>
+                      </NoiseAddProvider>
+                    </AlignmentProvider>
+                  </CentralizationProvider>
+                </ReescaleProvider>
+              </NormalEstimationProvider>
+            </StatisticalRemovalProvider>
+          </VoxelGridProvider>
+        </CropBoxProvider>
+      </CloudProvider>
+    </InterfaceTourProvider>
+  </ApplicationStateProvider>
 );
 
 export default GlobalProviders;

src/containers/footer/index.tsx

@@ -3,6 +3,7 @@ import { FC } from "react";
 
 /* HOOKS */
 import useStatus from "../../hooks/useStatus";
+import useInterfaceTour from "../../hooks/useInterfaceTour";
 
 /* UTILS */
 import { useTranslation } from "react-i18next";
@@ -11,9 +12,11 @@ const Footer: FC = () => {
   const { t } = useTranslation();
   const { status } = useStatus();
 
+  const { statusRef } = useInterfaceTour();
+
   return (
     <div className="bg-light-grey h-16 w-full flex items-center justify-end pr-16">
-      <span className="text-brown">
+      <span className="text-brown" ref={statusRef}>
         <span className="font-semibold">Status: </span>
         {t(`status.${status}`)}
       </span>

src/containers/header/index.tsx

@@ -1,5 +1,5 @@
 /* REACT */
-import { FC } from "react";
+import { FC, useRef } from "react";
 
 /* COMPONENTS */
 import { Tabs } from "antd";
@@ -12,54 +12,68 @@ import HelpTab from "./tabs/help";
 import AdminTab from "./tabs/admin";
 import AccountTab from "./tabs/account";
 
+/* HOOKS */
+import useApplicationState from "../../hooks/useApplicationState";
+import useInterfaceTour from "../../hooks/useInterfaceTour";
+
 /* UTILS */
 import { useTranslation } from "react-i18next";
-import { TTabItem } from "../../utils/types/tabs";
+import { TTabItem, TTabs } from "../../utils/types/tabs";
 
 const Header: FC = () => {
   const { t } = useTranslation();
+  const { activeTab, setActiveTab } = useApplicationState();
+
+  const { filesTabRef, preProcessingTabRef, processingTabRef, helpTabRef, accountTabRef } = useInterfaceTour();
 
   const items: TTabItem[] = [
     {
-      key: "files",
+      key: TTabs.FILES,
       active: true,
       label: t("tabs.files.label"),
+      ref: filesTabRef,
       children: <FilesTab />,
     },
     {
+      key: TTabs.PRE_PROCESSING,
       active: true,
-      key: "pre-processing",
       label: t("tabs.pre-processing.label"),
+      ref: preProcessingTabRef,
       children: <PreProcessingTab />,
     },
     {
+      key: TTabs.PROCESSING,
       active: true,
-      key: "processing",
       label: t("tabs.processing.label"),
+      ref: processingTabRef,
       children: <ProcessingTab />,
     },
     {
-      key: "help",
+      key: TTabs.HELP,
       active: true,
       label: t("tabs.help.label"),
+      ref: helpTabRef,
       children: <HelpTab />,
     },
     {
-      key: "admin",
+      key: TTabs.ADMIN,
       // active: localStorage.getItem("authEmail") === "admin@admin.com",
       active: true,
       label: t("tabs.admin.label"),
       children: <AdminTab />,
     },
     {
+      key: TTabs.ACCOUNT,
       active: true,
-      key: "account",
       label: t("tabs.account.label"),
+      ref: accountTabRef,
       children: <AccountTab />,
     },
   ];
 
-  return <Tabs type="card" items={items.filter((i) => i.active)} />;
+  return <Tabs type="card" onChange={(key: string) => setActiveTab(key as TTabs)} activeKey={activeTab} items={items.filter((i) => i.active)}> </Tabs>;
 };
 
 export default Header;
+
+//ref={items.filter((i) => i.ref))}

src/containers/header/tabs/account.tsx

@@ -4,6 +4,9 @@ import { FC } from "react";
 /* COMPONENTS */
 import HeaderTab from "../../../components/headerTab";
 
+/*HOOKS*/
+import useInterfaceTour from "../../../hooks/useInterfaceTour";
+
 /* UTILS */
 import { useTranslation } from "react-i18next";
 
@@ -15,13 +18,16 @@ const AccountTab: FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const { accountTabRef } = useInterfaceTour();
+
   const handleLogout = () => {
     localStorage.removeItem("authEmail");
     navigate("/");
   };
 
   return (
-    <HeaderTab
+    <div ref={accountTabRef}>
+      <HeaderTab
       items={[
         {
           active: true,
@@ -32,6 +38,7 @@ const AccountTab: FC = () => {
         },
       ]}
     />
+    </div>
   );
 };
 

src/containers/header/tabs/files.tsx

@@ -7,6 +7,7 @@ import UploadButton from "../../../components/uploadButton";
 
 /* HOOKS */
 import useCloud from "../../../hooks/useCloud";
+import useInterfaceTour from "../../../hooks/useInterfaceTour";
 
 /* API */
 import useUploadCloud from "../../../api/services/clouds/upload";
@@ -28,6 +29,9 @@ const FilesTab: FC = () => {
   const { isLoaded: isCloudLoaded } = useCloud();
   const { mutateAsync: uploadCloud } = useUploadCloud();
   const uploadButtonRef = useRef<HTMLInputElement>(null);
+  const { fileButtonRef } = useInterfaceTour();
+
+  const { filesTabRef } = useInterfaceTour();
 
   const handleLoadCloudClick = () => {
     if (uploadButtonRef.current) {
@@ -44,7 +48,7 @@ const FilesTab: FC = () => {
   };
 
   return (
-    <>
+    <div ref={filesTabRef}>
       <UploadButton
         className="hidden"
         inputRef={uploadButtonRef}
@@ -57,6 +61,7 @@ const FilesTab: FC = () => {
             icon: loadCloudIcon,
             key: "load-cloud-button",
             label: t("tabs.files.load-cloud"),
+            ref: fileButtonRef,
             action: handleLoadCloudClick,
           },
           {
@@ -103,7 +108,7 @@ const FilesTab: FC = () => {
           },
         ]}
       />
-    </>
+    </div>
   );
 };
 

src/containers/header/tabs/help.tsx

@@ -4,9 +4,13 @@ import { FC } from "react";
 /* COMPONENTS */
 import HeaderTab from "../../../components/headerTab";
 
+/* HOOKS*/
+import useInterfaceTour from "../../../hooks/useInterfaceTour";
+
 /* UTILS */
 import { useTranslation } from "react-i18next";
 import { TSupportedLanguages } from "../../../utils/constants/languages";
+import { useNavigate } from "react-router";
 
 /* ASSETS */
 import tourIcon from "../../../assets/icons/help/tour.svg";
@@ -16,20 +20,30 @@ import languageIcon from "../../../assets/icons/help/language.svg";
 
 const HelpTab: FC = () => {
   const { t, i18n } = useTranslation();
+  const { openTour } = useInterfaceTour();
+  const navigate = useNavigate();
+
+  const { helpTabRef } = useInterfaceTour();
 
   const handleLanguageSwitch = (lng: TSupportedLanguages) => {
     i18n.changeLanguage(lng);
   };
 
+  const handleTour = () => {
+    navigate("pointCloud");
+    openTour();
+  }
+
   return (
-    <HeaderTab
+    <div ref={helpTabRef}>
+      <HeaderTab
       items={[
         {
           active: true,
           icon: tourIcon,
           key: "tour-button",
           label: t("tabs.help.tour"),
-          action: () => console.log(t("tabs.help.tour")),
+          action: () => handleTour(),
         },
         {
           active: true,
@@ -55,6 +69,7 @@ const HelpTab: FC = () => {
         },
       ]}
     />
+    </div>
   );
 };
 

src/containers/header/tabs/preProcessing.tsx

@@ -23,6 +23,7 @@ import useReescale from "../../../hooks/preProcessing/useReescale";
 import useCentralization from "../../../hooks/preProcessing/useCentralization";
 import useAlignment from "../../../hooks/preProcessing/useAlignment";
 import useNoiseAdd from "../../../hooks/preProcessing/useNoiseAdd";
+import useInterfaceTour from "../../../hooks/useInterfaceTour";
 
 /* UTILS */
 import { useTranslation } from "react-i18next";
@@ -48,8 +49,10 @@ const PreProcessingTab: FC = () => {
   const { openModal: openAlignmentModal } = useAlignment();
   const { openModal: openNoiseAddModal } = useNoiseAdd();
 
+  const { preProcessingTabRef } = useInterfaceTour();
+
   return (
-    <>
+    <div ref={preProcessingTabRef}>
       <CropBoxModal />
       <VoxelGridModal />
       <StatisticalRemovalModal />
@@ -118,7 +121,7 @@ const PreProcessingTab: FC = () => {
           },
         ]}
       />
-    </>
+    </div>
   );
 };
 

src/containers/header/tabs/processing.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 
 /* HOOKS */
 import useEfficientRansac from "../../../hooks/processing/useEfficientRansac";
+import useInterfaceTour from "../../../hooks/useInterfaceTour";
 
 /* ASSETS */
 import aeroScanIcon from "../../../assets/images/logo.png";
@@ -21,8 +22,10 @@ const ProcessingTab: FC = () => {
   const { t } = useTranslation();
   const { openModal: openRansacModal } = useEfficientRansac();
 
+  const { processingTabRef } = useInterfaceTour();
+
   return (
-    <>
+    <div ref={processingTabRef}>
       <EfficientRansacModal />
       <HeaderTab
         items={[
@@ -42,7 +45,7 @@ const ProcessingTab: FC = () => {
           },
         ]}
       />
-    </>
+    </div>
   );
 };