solved heatmap preview bugs in comparsion

app/src/components/heatMapGenerator/heatMapRenderer.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react";
+import { useSceneContext } from "../../modules/scene/sceneContext";
+import { useSimulationManager } from "../../store/rough/useSimulationManagerStore";
+import { useSimulationState } from "../../store/simulation/useSimulationStore";
+import HeatmapPreview from "./heatmapPreview";
+
+const HeatMapRenderer = () => {
+    const { versionStore, layout } = useSceneContext();
+    const { selectedVersion } = versionStore();
+    const { simulationRecords } = useSimulationManager();
+    const { mainScene, comparisonScene } = useSimulationState();
+
+    const { mainSceneHeatmaps, comparisonSceneHeatmaps } = useMemo(() => {
+        const getHeatmaps = (scene: any) => {
+            const heatmaps: Array<{ image: string | Blob; type: string }> = [];
+            if (!scene) return heatmaps;
+
+            simulationRecords.forEach((project) =>
+                project.versions.forEach((version) =>
+                    version.products.forEach((product) =>
+                        product.simulateData.forEach((simulateDataItem) => {
+                            const isTargetScene =
+                                product.productId === scene.product.productUuid &&
+                                version.versionId === scene.version.versionUuid &&
+                                selectedVersion?.versionId;
+                            if (!isTargetScene) return;
+
+                            product.heatMaps?.forEach((heatMap) => {
+                                if (heatMap.type !== simulateDataItem.type) return;
+                                const img = heatMap.image;
+
+                                if (typeof img === "string") {
+                                    if (/\.(png|jpg)$/i.test(img)) {
+                                        heatmaps.push({ image: img, type: heatMap.type });
+                                    }
+                                } else if (img instanceof Blob) {
+                                    heatmaps.push({ image: img, type: heatMap.type });
+                                }
+                            });
+                        })
+                    )
+                )
+            );
+
+            return heatmaps;
+        };
+
+        return {
+            mainSceneHeatmaps: getHeatmaps(mainScene),
+            comparisonSceneHeatmaps: getHeatmaps(comparisonScene),
+        };
+    }, [simulationRecords, mainScene, comparisonScene, selectedVersion]);
+
+    return (
+        <>
+            {layout === "Main Layout" &&
+                mainSceneHeatmaps.map((heatMap, idx) => (
+                    <HeatmapPreview key={`main-${idx}`} image={heatMap.image} type={heatMap.type} />
+                ))}
+            {layout === "Comparison Layout" &&
+                comparisonSceneHeatmaps.map((heatMap, idx) => (
+                    <HeatmapPreview key={`comp-${idx}`} image={heatMap.image} type={heatMap.type} />
+                ))}
+        </>
+    );
+};
+
+export default HeatMapRenderer;