fixed tooltips, added modal

Author: Yukthiw

Eplant/views/WorldEFP/InfoContent.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material'
+import { styled, Theme } from '@mui/material'
 
 interface InfoContentProps {
   id: string
@@ -20,12 +20,12 @@ const InfoContent = ({ id, mean, std, sampleSize }: InfoContentProps) => {
   )
 }
 
-const StyledInfoContent = styled('div')(({ theme }) => ({
-  backgroundColor: 'white',
+const StyledInfoContent = styled('div')(() => ({
   wordWrap: 'break-word',
   maxWidth: '300px',
   '& p': {
     margin: '5px 0',
+    color: 'black',
   },
   '& strong': {
     display: 'block',

Eplant/views/WorldEFP/MapContainer.tsx

@@ -69,6 +69,7 @@ const MapContainer = ({ activeData, state, dispatch }: MapContainerProps) => {
         )
         return (
           <MapMarker
+            theme={theme}
             key={index}
             color={color}
             data={activeData.efpData.groups[index]}

Eplant/views/WorldEFP/MapMarker.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import Modal from '@eplant/UI/Modal'
-import { useTheme } from '@mui/material'
+import { Theme, useTheme } from '@mui/material'
 import {
   AdvancedMarker,
   InfoWindow,
@@ -12,19 +12,20 @@ import { EFPGroup } from '../eFP/types'
 
 import WorldEFPIcon from './icon'
 import InfoContent from './InfoContent'
+import { ModalContent } from './ModalContent'
 import { Coordinates } from './types'
 
 interface MapMarkerProps {
+  theme: Theme
   color: string
   position: Coordinates
   data: EFPGroup
 }
 
-const MapMarker = ({ data, color, position }: MapMarkerProps) => {
+const MapMarker = ({ theme, data, color, position }: MapMarkerProps) => {
   const [showPopup, setShowPopup] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const [markerRef, marker] = useAdvancedMarkerRef()
-  const theme = useTheme()
   const handleMouseOver = () => {
     setShowPopup(true)
   }
@@ -49,7 +50,7 @@ const MapMarker = ({ data, color, position }: MapMarkerProps) => {
         marker.content?.removeEventListener('mouseout', handleMouseOut)
       }
     }
-  }, [data])
+  }, [data, marker])
 
   return (
     <>
@@ -81,7 +82,15 @@ const MapMarker = ({ data, color, position }: MapMarkerProps) => {
         onClose={() => {
           setShowModal(false)
         }}
-      ></Modal>
+      >
+        <ModalContent
+          theme={theme}
+          id={data.name}
+          mean={data.mean}
+          std={data.std}
+          sampleSize={data.samples}
+        ></ModalContent>
+      </Modal>
     </>
   )
 }

Eplant/views/WorldEFP/ModalContent.tsx

@@ -0,0 +1,45 @@
+import { Box, Theme } from '@mui/material'
+import { styled } from '@mui/material'
+
+interface ModalContentProps {
+  theme: Theme
+  id: string
+  mean: number
+  std: number
+  sampleSize: number
+}
+export const ModalContent = ({
+  theme,
+  id,
+  mean,
+  std,
+  sampleSize,
+}: ModalContentProps) => {
+  return (
+    <StyledBox theme={theme}>
+      <p>
+        <strong>{id}</strong>
+      </p>
+      <p>Mean: {mean.toFixed(2)}</p>
+      <p>Standard error: {std.toFixed(2)}</p>
+      <p>Sample size: {sampleSize}</p>
+    </StyledBox>
+  )
+}
+
+const StyledBox = styled(Box)(({ theme }: { theme: any }) => ({
+  top: '50%',
+  left: '50%',
+  width: 400,
+  borderRadius: '24px',
+  padding: theme.spacing(4),
+  backgroundColor: theme.palette.background,
+  '& p': {
+    margin: '5px 0',
+    color: theme.palette.secondary.contrastText,
+  },
+  '& strong': {
+    display: 'block',
+    marginBottom: '10px',
+  },
+}))