Fixed ovelapping issues with modals and the navbar. Fixed trailing pi…

…xel in graph. Landing page advances

src/components/Graph/graph.js

@@ -9,7 +9,6 @@ function Graph({ activeGraph, setSelectedNode, setSelectedEdge, setDataOpen, tog
   const edgesInGraph = activeGraph.edges;
 
   const options = {
-    autoResize: false,
     height: '100%',
     width: '100%',
   };

src/components/Graph/graph.module.css

@@ -3,14 +3,18 @@
   border-radius: 2px;
   background-color: white;
   padding: 0;
-  height: 59vh;
+  height: 58.8vh;
   width: 98%;
   margin: 0 0 1vh 0;
   box-sizing: border-box;
+  transform: translateZ(0);
+  will-change: transform;
+  overflow: hidden;
 }
 
+
 @media (max-width: 768px) {
   .map {
     height: 25vh;
   }
-}
+}

src/components/LandingBackground/landingBackground.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Canvas } from '@react-three/fiber';
-import RotatingBox from './rotatingBox';
+import Scene from './scene';
 
 const LandingBackground = () => {
     return (
         <Canvas style={{ position: 'absolute', top: 0, left: 0, height: '100vh', zIndex: -1 }}>
             <ambientLight intensity={0.5} />
             <pointLight position={[10, 10, 10]} />
-            <RotatingBox />
+            <Scene />
         </Canvas>
     );
 }

src/components/LandingBackground/particle.js

@@ -0,0 +1,67 @@
+import React, { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import distinctColors from "distinct-colors";
+import * as THREE from 'three';
+
+const palette = distinctColors({
+    count: 50, // Adjust as needed
+    chromaMin: 15,
+    chromaMax: 95,
+    lightMin: 65,
+    lightMax: 90,
+});
+
+const Particle = ({ zPosition = -5, mouse }) => {
+    const mesh = useRef();
+    const opacityRef = useRef(1.0);
+    const randomColor = new THREE.Color().setRGB(
+        palette[Math.floor(Math.random() * palette.length)][0] / 255,
+        palette[Math.floor(Math.random() * palette.length)][1] / 255,
+        palette[Math.floor(Math.random() * palette.length)][2] / 255
+    );
+
+    const [position, velocity] = useMemo(() => {
+        // Random position and velocity
+        const pos = new THREE.Vector3(
+            (Math.random() - 0.5) * 10,
+            (Math.random() - 0.5) * 10,
+            zPosition
+        );
+        const vel = new THREE.Vector3((Math.random() - 0.5) * 0.02, (Math.random() - 0.5) * 0.02, (Math.random() - 0.5) * 0.02);
+        return [pos, vel];
+    }, []);
+
+    useFrame(() => {
+        // Random movement
+        mesh.current.position.add(velocity);
+
+        // Calculate direction to mouse
+        const dirToMouse = new THREE.Vector3().subVectors(position, new THREE.Vector3(mouse.current[0], mouse.current[1], zPosition));
+
+        // Apply avoidance behavior based on mouse proximity
+        if (dirToMouse.length() < 1.5) {
+            dirToMouse.normalize();
+            velocity.sub(dirToMouse.multiplyScalar(0.03));
+        }
+
+        // Fade away when out of view
+        if (mesh.current.position.length() > 5) {
+            opacityRef.current -= 0.005;
+            if (opacityRef.current > 0) {
+                mesh.current.material.opacity = opacityRef.current;
+            } else {
+                mesh.current.visible = false; // Hide the particle when opacity reaches 0
+            }
+        }
+    });
+
+    // Inside the Particle component
+    return (
+        <mesh ref={mesh} position={position} renderOrder={1}>
+            <sphereGeometry attach="geometry" args={[0.1, 16, 16]} />
+            <meshStandardMaterial attach="material" color={randomColor} emissive="black" emissiveIntensity={0.2} transparent opacity={opacityRef.current} />
+        </mesh>
+    );
+}
+
+export default Particle;

src/components/LandingBackground/rotatingBox.js

@@ -2,20 +2,21 @@ import React, { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { Box } from '@react-three/drei';
 
-const RotatingBox = () => {
+const RotatingBox = ({ position, rotationSpeed = 0.01, size = [2, 2, 2] }) => {
     const mesh = useRef();
 
     useFrame(() => {
         if (mesh.current) {
-            mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
+            mesh.current.rotation.x += rotationSpeed;
+            mesh.current.rotation.y += rotationSpeed;
         }
     });
 
     return (
-        <Box ref={mesh} args={[2, 2, 2]}>
-            <meshStandardMaterial attach="material" color="royalblue" />
+        <Box ref={mesh} args={size} position={position}>
+            <meshStandardMaterial attach="material" color="#e63946" />
         </Box>
     );
-};
+}
 
 export default RotatingBox;

src/components/LandingBackground/scene.js

@@ -0,0 +1,42 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+import RotatingBox from './rotatingBox';
+import Particle from './particle';
+
+const Scene = () => {
+    const { viewport } = useThree();
+    const mouse = useRef([0, 0]);
+    const numParticles = 50; // Adjust the number of particles here
+
+    const handleMouseMove = (event) => {
+        mouse.current = [event.clientX / viewport.width * 2 - 1, -event.clientY / viewport.height * 2 + 1];
+    };
+
+    useEffect(() => {
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, [viewport]);
+
+    return (
+        <>
+            {
+            /*
+            Array.from({ length: numParticles }, (_, i) => (
+                <Particle key={i} mouse={mouse} />
+            ))
+            */
+            }
+            <group>
+            <RotatingBox position={[-3, 0, 0]} rotationSpeed={0.01} size={[1.5, 1.5, 1.5]} />
+            <RotatingBox position={[-1.5, 0, 0]} rotationSpeed={0.015} size={[1.75, 1.75, 1.75]} />
+            <RotatingBox position={[0, 0, 0]} rotationSpeed={0.02} />
+            <RotatingBox position={[1.5, 0, 0]} rotationSpeed={0.015} size={[1.75, 1.75, 1.75]} />
+            <RotatingBox position={[3, 0, 0]} rotationSpeed={0.01} size={[1.5, 1.5, 1.5]} />
+            </group>
+        </>
+    );
+}
+
+export default Scene;

src/components/LandingDownloadLink/landingDownloadLink.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const LandingDownloadLink = ({ fileName, label }) => {
+  const fileUrl = `${process.env.PUBLIC_URL}/useCases/${fileName}`;
+
+  return (
+    <a href={fileUrl} download>
+      {label}
+    </a>
+  );
+}
+
+export default LandingDownloadLink;

src/components/ModalWrapper/modalWrapper.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import ModalWrapperStyles from "./modalWrapper.module.css";
 import CloseIcon from "@mui/icons-material/Close";
@@ -25,7 +26,7 @@ const ModalWrapper = ({ isOpen, children, closeModal, maxWidth }) => {
         setMouseDownOnBackdrop(false);
     }
 
-    return (
+    return createPortal(
         <CSSTransition
             in={isOpen}
             timeout={{ enter: 150, exit: 0 }}
@@ -55,7 +56,8 @@ const ModalWrapper = ({ isOpen, children, closeModal, maxWidth }) => {
                 </button>
             </div>
         </CSSTransition>
-    );
+        , document.getElementById('modal')
+    )
 }
 
 export default ModalWrapper;

src/components/ModalWrapper/modalWrapper.module.css

@@ -20,6 +20,11 @@
     transition: opacity 0.1s ease-out, transform 0.1s ease-out;
 }
 
+* {
+    scrollbar-width: auto;
+}
+
+
 .darkBG {
     background-color: rgba(0, 0, 0, 0.5);
     position: fixed;
@@ -31,7 +36,7 @@
     align-items: center;
     height: 100%;
     width: 100%;
-    z-index: 12;
+    z-index: 999;
 }
 
 .centered {
@@ -47,6 +52,6 @@
     border-radius: 16px;
     box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
     position: relative;
-    z-index: 1000;
+    z-index: 1000; 
     text-align: center;
 }

src/components/Navbar/navbar.module.css

@@ -25,14 +25,14 @@ li {
     position: fixed;
     top: 0;
     width: 100%;
-   z-index: 11;
+    z-index: 10;
 }
 
 .menu {
     display: flex;
     gap: 1em;
     font-size: 18px;
-    z-index: 20;
+    z-index: 11;
 }
 
 .menu div {
@@ -77,7 +77,7 @@ label[for="menuToggle"] {
         padding: 16px 0;
         transform: translateY(calc(-100% - 50px)); 
         transition: transform 0.3s ease-in-out;
-        z-index: 10;
+        z-index: 11;
         top: 50px;
     }
 

src/components/ResultTable/resultTable.module.css

@@ -41,7 +41,7 @@
   width: 7px;
   right: 0;
   top: 0;
-  z-index: 10;
+  z-index: 2;
   border-right: 2px solid transparent;
 }
 

src/components/SearchResults/searchResults.module.css

@@ -42,7 +42,7 @@
     background-color: lightGray;
     padding: 2px;
     border-radius: 2px;
-    z-index: 10;
+    z-index: 5;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 

src/index.css

@@ -1,15 +1,18 @@
 @import url("https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
 
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
 body {
   margin: 0;
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
   padding-top: 55px;
-  overflow-y: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  overflow-y: auto;
 }
 
 body::-webkit-scrollbar {
@@ -25,4 +28,4 @@ body::-webkit-scrollbar {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
-}
+}

src/index.js

@@ -15,6 +15,7 @@ import favicon from "./resources/icons/favicon.png";
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <ErrorBoundary>
+    <div id="modal"></div>
     <BrowserRouter>
       <Navbar />
       <link rel="icon" href={favicon} />