refactor: Use MaybeTooltip for conditional tooltips

visualize-admin · Sep 29, 2022 · 08c307b · 08c307b
1 parent a071f54
commit 08c307b
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 79 deletions.
diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from "@mui/material";
 import { axisLeft } from "d3";
 import { select, Selection } from "d3";
 import { useEffect, useRef } from "react";
@@ -10,6 +9,7 @@ import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { useFormatNumber } from "@/configurator/components/ui-helpers";
+import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const TICK_MIN_HEIGHT = 50;
 
@@ -58,23 +58,17 @@ export const AxisHeightLinear = () => {
   return (
     <>
       <g>
-        {yAxisDescription ? (
-          <Tooltip arrow title={yAxisDescription}>
-            <text
-              x={0}
-              y={0}
-              dy={labelFontSize}
-              fontSize={labelFontSize}
-              textDecoration="underline"
-            >
-              {yAxisLabel}
-            </text>
-          </Tooltip>
-        ) : (
-          <text x={0} y={0} dy={labelFontSize} fontSize={labelFontSize}>
+        <MaybeTooltip text={yAxisDescription}>
+          <text
+            x={0}
+            y={0}
+            dy={labelFontSize}
+            fontSize={labelFontSize}
+            textDecoration={yAxisDescription ? "underline" : undefined}
+          >
             {yAxisLabel}
           </text>
-        )}
+        </MaybeTooltip>
       </g>
       <g
         ref={ref}

diff --git a/app/charts/shared/axis-width-linear.tsx b/app/charts/shared/axis-width-linear.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from "@mui/material";
 import { axisBottom } from "d3";
 import { select, Selection } from "d3";
 import { useEffect, useRef } from "react";
@@ -9,6 +8,7 @@ import { useChartState } from "@/charts/shared/use-chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { useFormatNumber } from "@/configurator/components/ui-helpers";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
+import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const AxisWidthLinear = () => {
   const formatNumber = useFormatNumber();
@@ -62,30 +62,18 @@ export const AxisWidthLinear = () => {
   return (
     <>
       <g transform={`translate(${margins.left}, ${margins.top})`}>
-        {xAxisDescription ? (
-          <Tooltip arrow title={xAxisDescription}>
-            <text
-              x={chartWidth}
-              y={chartHeight + margins.bottom}
-              dy={-labelFontSize}
-              fontSize={labelFontSize}
-              textAnchor="end"
-              textDecoration="underline"
-            >
-              {xAxisLabel}
-            </text>
-          </Tooltip>
-        ) : (
+        <MaybeTooltip text={xAxisDescription}>
           <text
             x={chartWidth}
             y={chartHeight + margins.bottom}
             dy={-labelFontSize}
             fontSize={labelFontSize}
             textAnchor="end"
+            textDecoration={xAxisDescription ? "underline" : undefined}
           >
             {xAxisLabel}
           </text>
-        )}
+        </MaybeTooltip>
       </g>
       <g
         ref={xAxisRef}

diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx
@@ -1,9 +1,11 @@
-import { Box, TableSortLabel, Theme, Tooltip } from "@mui/material";
+import { Box, TableSortLabel, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import React, { useMemo, useContext } from "react";
 import { HeaderGroup } from "react-table";
 
+import { MaybeTooltip } from "@/utils/maybe-tooltip";
+
 import Flex from "../../components/flex";
 import { Observation } from "../../domain/data";
 
@@ -105,15 +107,17 @@ export const TableContent = ({ children }: { children: React.ReactNode }) => {
                       active={isCustomSorted}
                       direction={column.isSortedDesc ? "desc" : "asc"}
                     >
-                      {description ? (
-                        <Tooltip arrow title={description}>
-                          <span style={{ textDecoration: "underline" }}>
-                            {column.render("Header")}
-                          </span>
-                        </Tooltip>
-                      ) : (
-                        column.render("Header")
-                      )}
+                      <MaybeTooltip text={description}>
+                        <span
+                          style={{
+                            textDecoration: description
+                              ? "underline"
+                              : undefined,
+                          }}
+                        >
+                          {column.render("Header")}
+                        </span>
+                      </MaybeTooltip>
                     </TableSortLabel>
                   </Flex>
                 );

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
@@ -1,11 +1,12 @@
-import { Box, Typography, Tooltip } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { Fragment } from "react";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
 import { ChartConfig, DataSource } from "@/configurator";
 import { useTimeFormatUnit } from "@/configurator/components/ui-helpers";
 import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
+import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const ChartFiltersList = ({
   dataSetIri,
@@ -74,15 +75,17 @@ export const ChartFiltersList = ({
             {namedFilters.map(({ dimension, value }, i) => (
               <Fragment key={dimension.iri}>
                 <Box component="span" fontWeight="bold">
-                  {dimension.description ? (
-                    <Tooltip arrow title={dimension.description}>
-                      <span style={{ textDecoration: "underline" }}>
-                        {dimension.label}
-                      </span>
-                    </Tooltip>
-                  ) : (
-                    dimension.label
-                  )}
+                  <MaybeTooltip text={dimension.description || undefined}>
+                    <span
+                      style={{
+                        textDecoration: dimension.description
+                          ? "underline"
+                          : undefined,
+                      }}
+                    >
+                      {dimension.label}
+                    </span>
+                  </MaybeTooltip>
 
                   {": "}
                 </Box>

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -18,7 +18,6 @@ import {
   MenuItem,
   TypographyProps,
   Stack,
-  Tooltip,
 } from "@mui/material";
 import { useId } from "@reach/auto-id";
 import { timeFormat } from "d3-time-format";
@@ -35,6 +34,7 @@ import {
 import { useBrowseContext } from "@/configurator/components/dataset-browse";
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
+import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const Label = ({
   htmlFor,
@@ -49,32 +49,24 @@ export const Label = ({
   children: ReactNode;
   sx?: TypographyProps["sx"];
 }) => {
-  return tooltipText ? (
-    <Tooltip arrow title={tooltipText}>
-      <div style={{ width: "max-content", textDecoration: "underline" }}>
-        <Typography
-          component="label"
-          htmlFor={htmlFor}
-          variant={smaller ? "caption" : "body2"}
-          color="secondary"
-          display="flex"
-          sx={sx}
-        >
-          {children}
-        </Typography>
-      </div>
-    </Tooltip>
-  ) : (
-    <Typography
-      component="label"
-      htmlFor={htmlFor}
-      variant={smaller ? "caption" : "body2"}
-      color="secondary"
-      display="flex"
-      sx={sx}
-    >
-      {children}
-    </Typography>
+  return (
+    <MaybeTooltip text={tooltipText}>
+      <Typography
+        component="label"
+        htmlFor={htmlFor}
+        variant={smaller ? "caption" : "body2"}
+        color="secondary"
+        display="flex"
+        sx={{
+          ...sx,
+          ...(tooltipText
+            ? { width: "max-content", textDecoration: "underline" }
+            : {}),
+        }}
+      >
+        {children}
+      </Typography>
+    </MaybeTooltip>
   );
 };