From a64db245405d14f15c9516b27533eff8612cd7f5 Mon Sep 17 00:00:00 2001
From: Alex Shorsher <alex.shorsher@kaleido.io>
Date: Mon, 11 Apr 2022 13:32:53 -0400
Subject: [PATCH] change histogram tooltip to popover

The Histogram now uses a popover as the tooltip to prevent clipping

Signed-off-by: Alex Shorsher <alex.shorsher@kaleido.io>
---
 src/components/Charts/Histogram.tsx      | 230 +++++++++++++----------
 src/components/NetworkMap/NetworkMap.tsx |   2 +-
 2 files changed, 134 insertions(+), 98 deletions(-)

diff --git a/src/components/Charts/Histogram.tsx b/src/components/Charts/Histogram.tsx
index 7978fc1e..b8bb107b 100644
--- a/src/components/Charts/Histogram.tsx
+++ b/src/components/Charts/Histogram.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, Typography } from '@mui/material';
+import { Grid, Paper, Popover, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { Box } from '@mui/system';
 import { BarDatum, ResponsiveBar } from '@nivo/bar';
@@ -37,6 +37,9 @@ export const Histogram: React.FC<Props> = ({
 }) => {
   const theme = useTheme();
   const [xAxisValues, setXAxisValues] = useState<(string | number)[]>([]);
+  const [popoverBucket, setPopoverBucket] = useState<any>(undefined);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
 
   colors.push(getIsCappedColor(theme.palette.mode === 'light'));
 
@@ -47,6 +50,48 @@ export const Histogram: React.FC<Props> = ({
     }
   }, [data]);
 
+  const handleMouseLeave = () => {
+    setOpen(false);
+    setAnchorEl(null);
+    setPopoverBucket(undefined);
+  };
+
+  const handleMouseEnter = (bucket: any, event: any) => {
+    setAnchorEl(event.currentTarget);
+    setPopoverBucket(bucket);
+    setOpen(true);
+  };
+
+  const makePopoverContent = () => {
+    return (
+      <Paper
+        key={popoverBucket.key}
+        sx={{
+          borderRadius: DEFAULT_BORDER_RADIUS,
+          padding: 1,
+          backgroundColor: 'background.paper',
+        }}
+      >
+        {Object.entries(popoverBucket.data).map(([key, value], idx) => {
+          return (
+            key !== 'isCapped' &&
+            key !== 'timestamp' && (
+              <Typography key={key} sx={{ color: colors[idx] }}>
+                {`${key.toUpperCase()}: ${value ?? 0}`}
+              </Typography>
+            )
+          );
+        })}
+        <Typography variant="subtitle1" color="secondary">
+          {getFFTime(popoverBucket.data.timestamp.toString())}
+        </Typography>
+        <Typography variant="subtitle2" color="secondary">
+          {getFFTime(popoverBucket.data.timestamp.toString(), true)}
+        </Typography>
+      </Paper>
+    );
+  };
+
   return (
     <Box
       borderRadius={DEFAULT_BORDER_RADIUS}
@@ -62,108 +107,99 @@ export const Histogram: React.FC<Props> = ({
         <EmptyStateCard
           height={height ?? DEFAULT_HIST_HEIGHT}
           text={emptyText}
-        ></EmptyStateCard>
+        />
       ) : (
-        <Grid height="100%" width="100%" sx={{ cursor: 'pointer' }}>
-          <ResponsiveBar
-            data={data}
-            colors={colors}
-            keys={keys}
-            indexBy={indexBy}
-            margin={{ top: 10, right: 5, bottom: 60, left: 40 }}
-            padding={0.1}
-            valueScale={{ type: 'linear' }}
-            indexScale={{ type: 'band', round: true }}
-            axisTop={null}
-            axisRight={null}
-            axisBottom={{
-              tickSize: 5,
-              tickPadding: 5,
-              tickRotation: 0,
-              format: (v) =>
-                xAxisValues?.find((vts) => vts === v)
-                  ? dayjs(v).format('h:mm')
-                  : '',
-            }}
-            axisLeft={{
-              tickSize: 5,
-              tickPadding: 5,
-              tickRotation: 0,
-              tickValues: 5,
-            }}
-            legends={
-              includeLegend
-                ? [
-                    {
-                      dataFrom: 'keys',
-                      anchor: 'bottom',
-                      direction: 'row',
-                      justify: false,
-                      translateX: 0,
-                      translateY: 50,
-                      itemsSpacing: 2,
-                      itemWidth: 100,
-                      itemHeight: 10,
-                      itemDirection: 'left-to-right',
-                      itemOpacity: 1,
-                      itemTextColor: theme.palette.text.primary,
-                      symbolSize: 15,
-                      symbolShape: 'circle',
+        <>
+          <Grid height="100%" width="100%">
+            <ResponsiveBar
+              data={data}
+              colors={colors}
+              keys={keys}
+              indexBy={indexBy}
+              margin={{ top: 10, right: 5, bottom: 60, left: 40 }}
+              padding={0.1}
+              valueScale={{ type: 'linear' }}
+              indexScale={{ type: 'band', round: true }}
+              axisTop={null}
+              axisRight={null}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              axisBottom={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                format: (v) =>
+                  xAxisValues?.find((vts) => vts === v)
+                    ? dayjs(v).format('h:mm')
+                    : '',
+              }}
+              axisLeft={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                tickValues: 5,
+              }}
+              legends={
+                includeLegend
+                  ? [
+                      {
+                        dataFrom: 'keys',
+                        anchor: 'bottom',
+                        direction: 'row',
+                        justify: false,
+                        translateX: 0,
+                        translateY: 50,
+                        itemsSpacing: 2,
+                        itemWidth: 100,
+                        itemHeight: 10,
+                        itemDirection: 'left-to-right',
+                        itemOpacity: 1,
+                        itemTextColor: theme.palette.text.primary,
+                        symbolSize: 15,
+                        symbolShape: 'circle',
+                      },
+                    ]
+                  : undefined
+              }
+              motionConfig="stiff"
+              enableLabel={false}
+              role="application"
+              theme={{
+                background: theme.palette.background.paper,
+                axis: {
+                  ticks: {
+                    line: {
+                      stroke: theme.palette.background.default,
+                    },
+                    text: {
+                      fill: theme.palette.text.disabled,
                     },
-                  ]
-                : undefined
-            }
-            motionConfig="stiff"
-            enableLabel={false}
-            role="application"
-            theme={{
-              background: theme.palette.background.paper,
-              axis: {
-                ticks: {
+                  },
+                },
+                grid: {
                   line: {
                     stroke: theme.palette.background.default,
                   },
-                  text: {
-                    fill: theme.palette.text.disabled,
-                  },
-                },
-              },
-              grid: {
-                line: {
-                  stroke: theme.palette.background.default,
                 },
-              },
-            }}
-            tooltip={({ data }, idx) => {
-              return (
-                <Paper
-                  key={idx}
-                  sx={{
-                    borderRadius: DEFAULT_BORDER_RADIUS,
-                    padding: 1,
-                    backgroundColor: 'background.paper',
-                  }}
-                >
-                  {keys.map((key, idx) => {
-                    return (
-                      key !== 'isCapped' && (
-                        <Typography key={idx} sx={{ color: colors[idx] }}>
-                          {`${key.toUpperCase()}: ${data[key] ?? 0}`}
-                        </Typography>
-                      )
-                    );
-                  })}
-                  <Typography variant="subtitle1" color="secondary">
-                    {getFFTime(data.timestamp.toString())}
-                  </Typography>
-                  <Typography variant="subtitle2" color="secondary">
-                    {getFFTime(data.timestamp.toString(), true)}
-                  </Typography>
-                </Paper>
-              );
-            }}
-          />
-        </Grid>
+              }}
+              // disable tooltip in favor of popover
+              tooltip={() => <></>}
+            />
+          </Grid>
+          {anchorEl && (
+            <Popover
+              open={open}
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: 'center',
+                horizontal: 'center',
+              }}
+              style={{ pointerEvents: 'none' }}
+            >
+              {makePopoverContent()}
+            </Popover>
+          )}
+        </>
       )}
     </Box>
   );
diff --git a/src/components/NetworkMap/NetworkMap.tsx b/src/components/NetworkMap/NetworkMap.tsx
index 86a78126..2404d5f0 100644
--- a/src/components/NetworkMap/NetworkMap.tsx
+++ b/src/components/NetworkMap/NetworkMap.tsx
@@ -72,7 +72,7 @@ export const NetworkMap: React.FC<Props> = ({ size }) => {
     left: number;
   }>();
   const [popoverNode, setPopoverNode] = useState<any>(undefined);
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = (node: any, event: any) => {
     setAnchorPosition({
       top: node.x,