diff --git a/app/package-lock.json b/app/package-lock.json index ed85f25..d63595f 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2026,7 +2026,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2038,7 +2038,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4180,25 +4180,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4310,25 +4291,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -9082,7 +9063,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9959,7 +9940,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15343,7 +15324,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20820,7 +20801,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20863,7 +20844,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20875,7 +20856,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21371,7 +21352,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22430,7 +22411,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index 31465e9..8effa1f 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -86,10 +86,9 @@ function MainScene() { /> )} - {(isPlaying && activeModule === "simulation") || - comparisonProduct !== null ? ( - - ) : null} + {(isPlaying || comparisonProduct !== null) && + activeModule === "simulation" && + loadingProgress == 0 && } {isPlaying && activeModule !== "simulation" && } {/* remove this later */} diff --git a/app/src/components/templates/LoadingPage.tsx b/app/src/components/templates/LoadingPage.tsx index 329c19f..7e25c51 100644 --- a/app/src/components/templates/LoadingPage.tsx +++ b/app/src/components/templates/LoadingPage.tsx @@ -4,6 +4,7 @@ import { LogoIconLarge } from "../icons/Logo"; import { useParams } from "react-router-dom"; import { useProjectName } from "../../store/builder/store"; import { getAllProjects } from "../../services/dashboard/getAllProjects"; +import { useComparisonProduct } from "../../store/simulation/useSimulationStore"; interface LoadingPageProps { progress: number; // Expect progress as a percentage (0-100) @@ -12,6 +13,8 @@ interface LoadingPageProps { const LoadingPage: React.FC = ({ progress }) => { const { projectName, setProjectName } = useProjectName(); const { projectId } = useParams(); + const { comparisonProduct } = useComparisonProduct(); + const validatedProgress = Math.min(100, Math.max(0, progress)); const generateThumbnail = async () => { const email = localStorage.getItem("email"); @@ -30,25 +33,24 @@ const LoadingPage: React.FC = ({ progress }) => { const domainParts = emailParts[1].split("."); const Organization = domainParts[0]; - const projects = await getAllProjects( - userId, Organization + const projects = await getAllProjects(userId, Organization); + const filterProject = projects?.Projects.find( + (val: any) => val.projectUuid === projectId || val._id === projectId ); - const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id - === projectId) - setProjectName(filterProject.projectName) - - } - catch { - - } - } + setProjectName(filterProject.projectName); + } catch {} + }; useEffect(() => { generateThumbnail(); }, []); return ( -
+
{projectName}
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx index 4eeacca..db8b17c 100644 --- a/app/src/components/ui/compareVersion/CompareLayOut.tsx +++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx @@ -15,7 +15,8 @@ import Scene from "../../../modules/scene/scene"; import { useComparisonProduct } from "../../../store/simulation/useSimulationStore"; const CompareLayOut = () => { - const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct(); + const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = + useComparisonProduct(); const { products } = useProductStore(); const { setLoadingProgress } = useLoadingProgress(); const [width, setWidth] = useState("50vw"); @@ -25,6 +26,7 @@ const CompareLayOut = () => { const startWidthRef = useRef(0); const startXRef = useRef(0); const { setIsVersionSaved } = useSaveVersion(); + const { loadingProgress } = useLoadingProgress(); OuterClick({ contextClassName: ["displayLayouts-container", "selectLayout"], @@ -121,14 +123,16 @@ const CompareLayOut = () => { ref={wrapperRef} style={{ width }} > - + {loadingProgress == 0 && ( + + )}
{comparisonProduct && (
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index e7d54c6..c338f7c 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -52,7 +52,7 @@ border-radius: 50%; cursor: ew-resize; transition: transform 0.1s ease; - z-index: 10; + z-index: 100; } .chooseLayout-container { @@ -161,9 +161,7 @@ width: 100%; &:hover { - background-color: var( - --highlight-text-color - ) !important; + background-color: var(--highlight-text-color) !important; border-radius: 4px; .layout { @@ -254,6 +252,7 @@ display: flex; } } + .metric-value { padding-top: 6px; font-size: var(--font-size-xlarge); @@ -289,6 +288,7 @@ top: -57%; left: 220%; } + &::after { content: ""; position: absolute; @@ -300,21 +300,19 @@ background-color: #b7b7c6; // Custom polygon shape (adjust if needed) - clip-path: polygon( - 96% 52%, - 96% 54%, - 45% 53%, - 3% 100%, - 0 100%, - 42% 52% - ); + clip-path: polygon(96% 52%, + 96% 54%, + 45% 53%, + 3% 100%, + 0 100%, + 42% 52%); z-index: 0; // Behind any inner content } } // Optional: content above the shape - > * { + >* { position: relative; z-index: 1; } @@ -322,12 +320,14 @@ &:nth-child(2) { grid-column-start: 1; grid-row-start: 2; + .metric-label { white-space: normal; width: 50px; left: 230%; } } + &:nth-child(3) { grid-row: span 2 / span 2; grid-column-start: 2; @@ -367,21 +367,19 @@ height: 100%; background: var(--background-color, wheat); - clip-path: polygon( - 25% 0%, - 75% 0%, - 100% 50%, - 75% 100%, - 25% 100%, - 0% 50% - ); + clip-path: polygon(25% 0%, + 75% 0%, + 100% 50%, + 75% 100%, + 25% 100%, + 0% 50%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); z-index: 0; } // Content stays above the shape - > * { + >* { position: relative; z-index: 1; } @@ -586,4 +584,4 @@ position: relative; } } -} +} \ No newline at end of file diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss index 57473c2..5b4fe12 100644 --- a/app/src/styles/layout/loading.scss +++ b/app/src/styles/layout/loading.scss @@ -6,6 +6,16 @@ width: 100vw; background: var(--background-color-solid); + &.comparisionLoading { + + position: fixed; + top: 0; + right: 0; + + height: 100vh; + width: 50vw; + } + .loading-container { position: relative; height: 100%; @@ -59,6 +69,12 @@ } .progress-container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + .progress-value { font-family: #{$font-josefin-sans}; font-weight: #{$thin-weight}; @@ -69,7 +85,7 @@ .progress-indicator-container { height: 6px; - width: 60vw; + width: 60%; background: var(--highlight-accent-color); border-radius: #{$border-radius-small}; position: relative; diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index a0dde58..2ac8f98 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -62,7 +62,7 @@ border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); transform: translate(-50%, 12px); - z-index: 100; + z-index: 2; .presets-container { @include flex-center;