Merge pull request #336 from MoTrPAC/335_JZ_Homepage_UIs_Graphical_Cl…

…ustering

Connects to # 335. Homepage UI Updates.

package.json

@@ -1,15 +1,15 @@
 {
   "name": "MoTrPAC",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "dependencies": {
-    "auth0-js": "9.20.0",
+    "auth0-js": "9.26.0",
     "autoprefixer": "10.4.13",
     "axios": "0.28.0",
     "bootstrap": "4.6.1",
     "chart.js": "^2.9.3",
     "crypto": "^1.0.1",
-    "d3": "6.7.0",
+    "d3": "7.9.0",
     "dayjs": "1.11.7",
     "from-exponential": "^1.1.1",
     "ga-gtag": "1.2.0",
@@ -26,14 +26,15 @@
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
     "react-redux": "8.0.5",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
     "react-table": "^7.7.0",
     "react-tooltip": "^5.11.2",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "tocbot": "^4.25.0",
-    "victory": "36.9.2",
+    "victory": "37.0.2",
     "vis-data": "^7.1.7",
     "vis-network": "^9.1.8",
     "vis-network-react": "^1.3.6"
@@ -58,11 +59,12 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "6.5.15",
-    "@storybook/addon-links": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/preset-create-react-app": "4.1.2",
-    "@storybook/react": "6.5.15",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@storybook/addon-actions": "8.0.10",
+    "@storybook/addon-links": "8.0.10",
+    "@storybook/addons": "7.6.17",
+    "@storybook/preset-create-react-app": "8.0.10",
+    "@storybook/react": "8.0.10",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -82,7 +84,10 @@
   "jest": {
     "transform": {},
     "transformIgnorePatterns": [
-      "/node_modules/(?!(vis-network|vis-data))"
-    ]
+      "/node_modules/(?!(vis-network|vis-data|d3|d3-array))"
+    ],
+    "moduleNameMapper": {
+      "d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
+    }
   }
 }

src/LandingPage/landingPage.jsx

@@ -4,16 +4,17 @@ import { connect } from 'react-redux';
 import { Redirect, Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import VisNetworkReactComponent from 'vis-network-react';
+import { useMediaQuery } from 'react-responsive';
 import Footer from '../Footer/footer';
 import PromoteBanner from './promoteBanner';
 import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
 import IconSet from '../lib/iconSet';
 
 import LogoMotrpacWhite from '../assets/logo-motrpac-white.png';
-import BackgroundVideoPreloader from '../assets/LandingPageGraphics/background_video_preload.jpg';
+import BackgroundVideoImage from '../assets/LandingPageGraphics/background_video_preload.jpg';
 import LayerRunner from '../assets/LandingPageGraphics/Data_Layer_Runner.png';
 import RatFigurePaass1b from '../assets/LandingPageGraphics/rat-figure-pass1b.svg';
-import LandscapePreprintAbstract from '../assets/LandingPageGraphics/landscape_abstract.jpg';
+import LandscapeAbstract from '../assets/LandingPageGraphics/landscape_abstract.gif';
 import BackgroundVideo from './components/backgroundVideo';
 import Figure1C from './components/figure1c';
 
@@ -143,6 +144,7 @@ export function LandingPage({ isAuthenticated, profile }) {
   const [data, setData] = useState(figure4eData);
   const [networkNodes, setNetwortNodes] = useState([]);
   const iframeRef = useRef(null);
+  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
 
   const handleAddNode = useCallback(() => {
     const id = data.nodes.length + 1;
@@ -188,10 +190,18 @@ export function LandingPage({ isAuthenticated, profile }) {
       </Helmet>
       <section className="first">
         <div className="w-100 h-100 d-flex align-items-center">
-          <BackgroundVideo />
           {!backgroundVideoLoaded && (
             <img
-              src={BackgroundVideoPreloader}
+              src={BackgroundVideoImage}
+              className="background-video-preloader"
+              alt="Background Video"
+            />
+          )}
+          {!isMobile ? (
+            <BackgroundVideo />
+          ) : (
+            <img
+              src={BackgroundVideoImage}
               className="background-video-preloader"
               alt="Background Video"
             />
@@ -282,7 +292,7 @@ export function LandingPage({ isAuthenticated, profile }) {
                 onClick={goToExternalLink}
               >
                 <img
-                  src={LandscapePreprintAbstract}
+                  src={LandscapeAbstract}
                   className="img-fluid lanascape-paper-abstract"
                   alt="Landscape Paper Abstract"
                 />