Merge pull request #6 from osg-htc/map-start

Added transition animation to the sidebar, tooltip and zoom on hover …
osg-htc · Nov 3, 2023 · 116a250 · 116a250
2 parents 83cc74e + 01c06c5
commit 116a250
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/app/components/Markers.tsx b/src/app/components/Markers.tsx
@@ -4,6 +4,7 @@ import { School } from "@mui/icons-material";
 import { Feature, TypedFeatures } from "../../../types/mapTypes";
 import Features from "../../../public/features.json";
 import { getFacilityEsData } from "@/app/institutions/elasticQuery.js";
+import { Tooltip } from "@mui/material";
 
 type MarkersProps = {
   onMarkerClick: (feature: Feature) => void;
@@ -31,9 +32,11 @@ const Markers: React.FC<MarkersProps> = ({ onMarkerClick }) => {
       if (!esInfo) {
         // Handle cases where there's no matching institution in the ElasticSearch data.
         return null;
+      } if(esInfo.gpuProvided > 0) {
+        console.log({esInfo});
       }
 
-      const typedFeature: TypedFeatures = {
+      const filteredFeature: TypedFeatures = {
         type: feature.type,
         properties: {
           "Institution Name": institutionName,
@@ -52,11 +55,15 @@ const Markers: React.FC<MarkersProps> = ({ onMarkerClick }) => {
 
       return (
         <Marker
-          key={typedFeature.id}
-          longitude={typedFeature.geometry.coordinates[0]}
-          latitude={typedFeature.geometry.coordinates[1]}
+          key={filteredFeature.id}
+          longitude={filteredFeature.geometry.coordinates[0]}
+          latitude={filteredFeature.geometry.coordinates[1]}
         >
-          <School fontSize="small" onClick={() => onMarkerClick(typedFeature)} />
+          <Tooltip title={filteredFeature.properties["Institution Name"]} placement="top">
+          <School 
+            className="hover:scale-150 transition duration-300 ease-in-out cursor-pointer"
+            fontSize="small" onClick={() => onMarkerClick(filteredFeature)} />
+          </Tooltip>
         </Marker>
       );
     });

diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Box, IconButton, Typography, useMediaQuery } from '@mui/material';
+import { Box, IconButton, Typography, useMediaQuery, Slide } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
 import useTheme from '@mui/material/styles/useTheme';
 import { sub } from 'date-fns';
+import { motion } from 'framer-motion';
 
 type SidebarProps = {
   onClose: () => void;
@@ -54,6 +55,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataSta
     orgId: 1
   }
   return (
+    <Slide direction="right" in={true} mountOnEnter unmountOnExit>
     <Box
       component="aside"
       sx={{
@@ -74,7 +76,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataSta
           <CloseIcon />
         </IconButton>
       </Box>
-      <Box className="flex gap-2 ">
+      <Box className="flex gap-2 flex-col sm:flex-row my-2">
               <GrafanaPanel
                 panelId={12}
                 panelUrl={data.panelUrl}
@@ -92,7 +94,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataSta
                 facultyName={facultyName}
             />
         </Box>
-        <Box className="flex gap-2 ">
+        <Box className="flex gap-2 flex-col sm:flex-row my-2">
             <GrafanaPanel
                 panelId={6}
                 panelUrl={data.panelUrl}
@@ -110,7 +112,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataSta
                 facultyName={facultyName}
             />
         </Box>
-        <Box className="flex gap-2 ">
+        <Box className="flex flex-col sm:flex-row my-2 ">
           { dataState ?
             <GrafanaPanel
                 panelId={8}
@@ -123,6 +125,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataSta
           }
         </Box>
     </Box>
+    </Slide>
   );
 };