From 9ba98d012017c5f1e91c18866038d233156deb4f Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Fri, 5 Sep 2025 17:13:51 +0530 Subject: [PATCH] refactor HeatMap component and integrate baked heat map functionality --- .../heatMapGenerator/baked/bakedHeatMap.tsx | 478 ++++++++++++++++++ .../components/heatMapGenerator/heatMap.tsx | 14 + .../realTime/realTimeHeatMap.tsx} | 26 +- app/src/modules/simulation/simulation.tsx | 48 +- app/src/store/simulation/useHeatMapStore.ts | 27 +- 5 files changed, 552 insertions(+), 41 deletions(-) create mode 100644 app/src/components/heatMapGenerator/baked/bakedHeatMap.tsx create mode 100644 app/src/components/heatMapGenerator/heatMap.tsx rename app/src/components/{HeatMap/HeatMap.tsx => heatMapGenerator/realTime/realTimeHeatMap.tsx} (92%) diff --git a/app/src/components/heatMapGenerator/baked/bakedHeatMap.tsx b/app/src/components/heatMapGenerator/baked/bakedHeatMap.tsx new file mode 100644 index 0000000..97b066b --- /dev/null +++ b/app/src/components/heatMapGenerator/baked/bakedHeatMap.tsx @@ -0,0 +1,478 @@ +import React, { useEffect } from "react"; +import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore"; + +function BakedHeatMap() { + const { bakedPoints, setBakedPoints } = useHeatMapStore(); + useEffect(() => { + console.log("bakedPoints: ", bakedPoints); + setBakedPoints([ + { + x: -13.413516772698177, + y: -12.63518978091868, + }, + { + x: 1.2354600621530758, + y: -2.3794652653900545, + }, + { + x: -13.228715403191334, + y: -12.110164362649389, + }, + { + x: 1.2354600621530758, + y: -2.3794652653900545, + }, + { + x: -12.895933084168604, + y: -11.16472202271144, + }, + { + x: 1.2146364581619484, + y: -2.458777246830882, + }, + { + x: -12.56388120623421, + y: -10.22135488296373, + }, + { + x: 0.9606649075524938, + y: -3.426092325528903, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.379278822340664, + y: -9.696895199231204, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -11.765220568117899, + y: -10.165809057613947, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -10.947349624124, + y: -10.762161268114605, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -10.139174838325012, + y: -11.351443505760303, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -9.329222423526684, + y: -11.942021905093844, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -8.520482028503096, + y: -12.531716557820241, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -7.70091425682336, + y: -13.129306013571778, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.889992226202834, + y: -13.72059141019279, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.070909262434194, + y: -14.317827367300595, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.052728965813095, + y: -14.331083566407761, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.745374744265807, + y: -13.826039532128796, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -7.555811966975235, + y: -13.235107634151518, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -8.373925314924684, + y: -12.638578674328992, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -9.185412954772822, + y: -12.046880862625084, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -9.993991747160381, + y: -11.4573040427792, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -10.812670704337439, + y: -10.86036266787378, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -11.622542317819256, + y: -10.269843184979397, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.388054007546796, + y: -9.711668827905626, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.388054007546796, + y: -9.711668827905626, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.388054007546796, + y: -9.711668827905626, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.388054007546796, + y: -9.711668827905626, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -12.388054007546796, + y: -9.711668827905626, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -11.671167833596273, + y: -10.234387794329676, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -10.848529611822936, + y: -10.834216074817558, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -10.028153826960038, + y: -11.43239469497386, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -9.219090226661379, + y: -12.02232501346348, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -8.397987229934841, + y: -12.621033881583191, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -7.5732481738840844, + y: -13.222393989524333, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.755458031206697, + y: -13.818687283585831, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.8468970296669924, + y: -3.8594061494041965, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.6887446149645632, + y: -3.056614231646619, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.4926411078662814, + y: -2.0612481359291923, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.2993211300946861, + y: -1.0800104500460184, + }, + { + x: -6.049335310444421, + y: -14.333558056907329, + }, + { + x: 0.10578852161104557, + y: -0.09769351063592024, + }, + { + x: -6.0721381600575395, + y: -14.316931314176879, + }, + { + x: -0.04612645742123378, + y: 0.6733840789380983, + }, + { + x: -6.8802321445370085, + y: -13.727707992972537, + }, + { + x: -0.04612645742123378, + y: 0.6733840789380983, + }, + ]); + }, [bakedPoints]); + return <>; +} + +export default BakedHeatMap; diff --git a/app/src/components/heatMapGenerator/heatMap.tsx b/app/src/components/heatMapGenerator/heatMap.tsx new file mode 100644 index 0000000..83b987a --- /dev/null +++ b/app/src/components/heatMapGenerator/heatMap.tsx @@ -0,0 +1,14 @@ +import RealTimeHeatMap from "./realTime/realTimeHeatMap"; +import BakedHeatMap from "./baked/bakedHeatMap"; + +function HeatMap() { + return ( + <> + + + + + ); +} + +export default HeatMap; diff --git a/app/src/components/HeatMap/HeatMap.tsx b/app/src/components/heatMapGenerator/realTime/realTimeHeatMap.tsx similarity index 92% rename from app/src/components/HeatMap/HeatMap.tsx rename to app/src/components/heatMapGenerator/realTime/realTimeHeatMap.tsx index fdf0920..572e5b3 100644 --- a/app/src/components/HeatMap/HeatMap.tsx +++ b/app/src/components/heatMapGenerator/realTime/realTimeHeatMap.tsx @@ -1,18 +1,18 @@ import * as THREE from "three"; import { useEffect, useMemo, useRef, useState } from "react"; import { useFrame, useThree } from "@react-three/fiber"; -import { useProductContext } from "../../modules/simulation/products/productContext"; -import { useSceneContext } from "../../modules/scene/sceneContext"; -import * as CONSTANTS from "../../types/world/worldConstants"; -import { determineExecutionMachineSequences } from "../../modules/simulation/simulator/functions/determineExecutionMachineSequences"; -import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../store/usePlayButtonStore"; -import { useHeatMapStore } from "../../store/simulation/useHeatMapStore"; +import { useProductContext } from "../../../modules/simulation/products/productContext"; +import { useSceneContext } from "../../../modules/scene/sceneContext"; +import * as CONSTANTS from "../../../types/world/worldConstants"; +import { determineExecutionMachineSequences } from "../../../modules/simulation/simulator/functions/determineExecutionMachineSequences"; +import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore"; +import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore"; const DECAY_RATE = 0.01; const GROWTH_TIME_MULTIPLIER = 20; const RADIUS = 0.005; const OPACITY = 0.8; -const UPDATE_INTERVAL = 0.1; +const UPDATE_INTERVAL = 1; interface HeatPoint { x: number; @@ -21,19 +21,17 @@ interface HeatPoint { lastUpdated: number; } -const HeatMap = () => { +const RealTimeHeatMap = () => { const isUsingBBOX = false; const height = CONSTANTS.gridConfig.size; const width = CONSTANTS.gridConfig.size; const debugMode: "solid" | "grayscale" | "normal" = "normal"; - const debugModeMap = { solid: 0, grayscale: 1, normal: 2 } as const; - const { productStore } = useSceneContext(); const { getProductById, products } = productStore(); const { selectedProductStore } = useProductContext(); const { selectedProduct } = selectedProductStore(); - const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle } = useHeatMapStore(); + const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle, addBakedPoint } = useHeatMapStore(); const { isPlaying } = usePlayButtonStore(); const { isReset } = useResetButtonStore(); const { isPaused } = usePauseButtonStore(); @@ -107,7 +105,7 @@ const HeatMap = () => { delta = now - lastFrameTime.current; } lastFrameTime.current = now; - + if (delta <= 0) return; const updateInterval = UPDATE_INTERVAL / Math.max(speed, 0.1); @@ -128,6 +126,8 @@ const HeatMap = () => { })() : model.position; + // addBakedPoint({ x: pos.x, y: pos.z }); + updatedPoints.push({ x: pos.x, y: pos.z, strength: 0.3, lastUpdated: now }); }); @@ -245,4 +245,4 @@ const HeatMap = () => { ); }; -export default HeatMap; +export default RealTimeHeatMap; diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index 80467e4..f120a42 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -1,20 +1,20 @@ -import { useEffect } from 'react'; -import Vehicles from './vehicle/vehicles'; -import Points from './events/points/points'; -import Conveyor from './conveyor/conveyor'; -import RoboticArm from './roboticArm/roboticArm'; -import Materials from './materials/materials'; -import Machine from './machine/machine'; -import StorageUnit from './storageUnit/storageUnit'; -import Human from './human/human'; -import Crane from './crane/crane'; -import Simulator from './simulator/simulator'; -import Products from './products/products'; -import Trigger from './triggers/trigger'; -import useModuleStore from '../../store/useModuleStore'; -import SimulationAnalysis from './analysis/simulationAnalysis'; -import { useSceneContext } from '../scene/sceneContext'; -import HeatMap from '../../components/HeatMap/HeatMap'; +import { useEffect } from "react"; +import Vehicles from "./vehicle/vehicles"; +import Points from "./events/points/points"; +import Conveyor from "./conveyor/conveyor"; +import RoboticArm from "./roboticArm/roboticArm"; +import Materials from "./materials/materials"; +import Machine from "./machine/machine"; +import StorageUnit from "./storageUnit/storageUnit"; +import Human from "./human/human"; +import Crane from "./crane/crane"; +import Simulator from "./simulator/simulator"; +import Products from "./products/products"; +import Trigger from "./triggers/trigger"; +import useModuleStore from "../../store/useModuleStore"; +import SimulationAnalysis from "./analysis/simulationAnalysis"; +import { useSceneContext } from "../scene/sceneContext"; +import HeatMap from "../../components/heatMapGenerator/heatMap"; function Simulation() { const { activeModule } = useModuleStore(); @@ -24,21 +24,18 @@ function Simulation() { useEffect(() => { // console.log('events: ', events); - }, [events]) + }, [events]); useEffect(() => { // console.log('products: ', products); - }, [products]) + }, [products]); return ( <> - - {activeModule === 'simulation' && - + {activeModule === "simulation" && ( <> - @@ -64,11 +61,8 @@ function Simulation() { - - - } - + )} ); } diff --git a/app/src/store/simulation/useHeatMapStore.ts b/app/src/store/simulation/useHeatMapStore.ts index a156ccf..968de24 100644 --- a/app/src/store/simulation/useHeatMapStore.ts +++ b/app/src/store/simulation/useHeatMapStore.ts @@ -1,9 +1,15 @@ import { create } from "zustand"; import { immer } from "zustand/middleware/immer"; +interface BakedPoint { + x: number; + y: number; +} + interface HeatMapState { monitoringVehicle: string[]; monitoringHuman: string[]; + bakedPoints: BakedPoint[]; setMonitoringVehicle: (vehiclesUuid: string[]) => void; addMonitoringVehicle: (vehicleUuid: string) => void; @@ -17,6 +23,10 @@ interface HeatMapState { clearAllMonitors: () => void; + setBakedPoints: (points: BakedPoint[]) => void; + addBakedPoint: (point: BakedPoint) => void; + clearBakedPoints: () => void; + hasVehicle: (vehicleUuid: string) => boolean; hasHuman: (humanUuid: string) => boolean; } @@ -25,6 +35,7 @@ export const useHeatMapStore = create()( immer((set, get) => ({ monitoringVehicle: [], monitoringHuman: [], + bakedPoints: [], setMonitoringVehicle: (vehiclesUuid) => set((state) => { @@ -76,6 +87,20 @@ export const useHeatMapStore = create()( state.monitoringHuman = []; }), + setBakedPoints: (points: BakedPoint[]) => + set((state) => { + state.bakedPoints = points; + }), + addBakedPoint: (point: BakedPoint) => + set((state) => { + state.bakedPoints.push(point); + }), + + clearBakedPoints: () => + set((state) => { + state.bakedPoints = []; + }), + hasVehicle: (vehicleUuid) => get().monitoringVehicle.includes(vehicleUuid), hasHuman: (humanUuid) => get().monitoringHuman.includes(humanUuid), })) @@ -97,4 +122,4 @@ export const useHeatMapStore = create()( // setEvents(newEvents); // }); // } -// }, [selectedProduct, products, monitoringHuman, monitoringVehicle]); \ No newline at end of file +// }, [selectedProduct, products, monitoringHuman, monitoringVehicle]);