Fixed genedist chart

Author: Yukthiw

Eplant/views/WorldEFP/MapContainer.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 
-import { useTheme } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
+import { alpha } from '@mui/material/styles'
 import {
   Map,
   MapCameraChangedEvent,
@@ -74,17 +75,36 @@ const MapContainer = ({ activeData, state, setState }: MapContainerProps) => {
           ></MapMarker>
         )
       })}
-      <Legend
+      <Box
         sx={(theme) => ({
           position: 'absolute',
           left: theme.spacing(2),
           bottom: theme.spacing(4),
           zIndex: 10,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: theme.spacing(1),
+          padding: theme.spacing(1),
+          borderRadius: theme.spacing(1),
+          backgroundColor: alpha(theme.palette.background.active, 0.4),
+          boxShadow: '0 8px 24px rgba(0, 0, 0, 0.18)',
+          border: `1px solid ${alpha(theme.palette.background.edge, 0.7)}`,
+          backdropFilter: 'blur(8px)',
+          WebkitBackdropFilter: 'blur(8px)',
         })}
-        colorMode={'absolute'}
-        data={activeData.efpData}
-      ></Legend>
-      <GeneDistributionChart data={activeData.efpData} />
+      >
+        <GeneDistributionChart
+          data={activeData.efpData}
+          containerStyle={{
+            position: 'static',
+            width: 'auto',
+            height: 'auto',
+            marginLeft: '-12px',
+          }}
+        />
+        <Legend colorMode={'absolute'} data={activeData.efpData}></Legend>
+      </Box>
     </Map>
   )
 }

Eplant/views/WorldEFP/WorldEFP.tsx

@@ -10,12 +10,12 @@ import { useQuery } from '@tanstack/react-query'
 import { APIProvider } from '@vis.gl/react-google-maps'
 
 import { EFPData, EFPGroup } from '../eFP/types'
+import GeneDistributionChart from '../eFP/Viewer/GeneDistributionChart'
 import MaskModal from '../eFP/Viewer/MaskModal'
 
 import MapContainer from './MapContainer'
 import {
   Coordinates,
-  WorldEFPAction,
   WorldEFPData,
   WorldEFPMicroArrayResponse,
   WorldEFPState,

Eplant/views/eFP/Viewer/GeneDistributionChart.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react'
-import { SVGProps, useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import { useDarkMode } from '@eplant/state'
-import { Mail } from '@mui/icons-material'
 import { useTheme } from '@mui/material'
 
 import { EFPData } from '../types'
 
-const GeneDistributionChart = ({ data }: { data: EFPData }) => {
+type GeneDistributionChartProps = {
+  data: EFPData
+  containerStyle?: React.CSSProperties
+}
+
+const GeneDistributionChart = ({
+  data,
+  containerStyle,
+}: GeneDistributionChartProps) => {
   const theme = useTheme()
   const [geneRanking, setGeneRanking] = useState<{
     [key: string]: string
@@ -41,10 +47,11 @@ const GeneDistributionChart = ({ data }: { data: EFPData }) => {
       style={{
         display: 'flex',
         flexDirection: 'column',
-        position: 'relative',
+        position: 'absolute',
         zIndex: 10,
         width: '100%',
         height: '10%',
+        ...containerStyle,
       }}
     >
       {geneRanking ? (