Add info tooltip to the chart

Contribute to #384

app/scripts/components/analysis/results/chart-card.tsx

@@ -1,17 +1,21 @@
 import React, { useCallback, useRef, useMemo, MouseEvent } from 'react';
 import { format } from 'date-fns';
 import { reverse } from 'd3';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+import { Link } from 'react-router-dom';
+import { glsp } from '@devseed-ui/theme-provider';
 import {
   Toolbar,
   ToolbarIconButton,
   VerticalDivider
 } from '@devseed-ui/toolbar';
 import {
   CollecticonCircleInformation,
-  CollecticonDownload2
+  CollecticonDownload2,
+  CollecticonExpandTopRight
 } from '@devseed-ui/collecticons';
 import { Dropdown, DropMenu, DropTitle } from '@devseed-ui/dropdown';
+import { Button } from '@devseed-ui/button';
 
 import { TimeseriesData } from './timeseries-data';
 import {
@@ -33,8 +37,24 @@ import { ChartLoading } from '$components/common/loading-skeleton';
 import { dateFormatter } from '$components/common/chart/utils';
 import { Tip } from '$components/common/tip';
 import { composeVisuallyDisabled } from '$utils/utils';
-import { exportCsv, getTimeDensityFormat } from '$components/common/chart/analysis/utils';
+import {
+  exportCsv,
+  getTimeDensityFormat
+} from '$components/common/chart/analysis/utils';
 import DropMenuItemButton from '$styles/drop-menu-item-button';
+import { datasetOverviewPath } from '$utils/routes';
+import { ThematicItemFull, useThematicArea } from '$utils/thematics';
+
+const InfoTipContent = styled.div`
+  padding: ${glsp(0.25)};
+  display: flex;
+  flex-flow: column;
+  gap: ${glsp(0.5)};
+
+  ${Button} {
+    align-self: flex-start;
+  }
+`;
 
 interface ChartCardProps {
   title: React.ReactNode;
@@ -60,6 +80,35 @@ const getNoDownloadReason = ({ status, data }: TimeseriesData) => {
   return '';
 };
 
+/**
+ * Get the Dataset overview path from a given dataset layer.
+ *
+ * The analysis charts refer to a dataset layer and not the dataset itself.
+ * Since each dataset layer is analyzed individually (relating to a STAC
+ * dataset), there is no information on the layer data about the parent dataset.
+ * To find the corresponding dataset we look through the layers of the datasets
+ * of the thematic area and use the found match.
+ *
+ * @param thematic Thematic area data
+ * @param layerId Id of the dataset layer
+ *
+ * @returns Internal path for Link
+ */
+const getDatasetOverviewPath = (
+  thematic: ThematicItemFull,
+  layerId: string
+) => {
+  if (!thematic) return '/';
+
+  const dataset = thematic.data.datasets.find((d) =>
+    d.layers.find((l) => l.id === layerId)
+  );
+
+  return dataset
+    ? datasetOverviewPath(thematic.data.id, dataset.id)
+    : '/';
+};
+
 export default function ChartCard(props: ChartCardProps) {
   const {
     title,
@@ -71,6 +120,8 @@ export default function ChartCard(props: ChartCardProps) {
   } = props;
   const { status, meta, data, error, name, id, layer } = chartData;
 
+  const thematic = useThematicArea();
+
   const chartRef = useRef<AnalysisChartRef>(null);
   const noDownloadReason = getNoDownloadReason(chartData);
 
@@ -117,8 +168,9 @@ export default function ChartCard(props: ChartCardProps) {
 
   const chartDates = useMemo(
     () =>
-      data?.timeseries.map((e) => dateFormatter(new Date(e.date), timeDensityFormat)) ??
-      [],
+      data?.timeseries.map((e) =>
+        dateFormatter(new Date(e.date), timeDensityFormat)
+      ) ?? [],
     [data?.timeseries, timeDensityFormat]
   );
 
@@ -166,9 +218,28 @@ export default function ChartCard(props: ChartCardProps) {
             </Dropdown>
 
             <VerticalDivider variation='dark' />
-            <ToolbarIconButton variation='base-text'>
-              <CollecticonCircleInformation title='More info' meaningful />
-            </ToolbarIconButton>
+            <Tip
+              content={
+                <InfoTipContent>
+                  <p>{layer.description}</p>
+                  <Button
+                    forwardedAs={Link}
+                    to={getDatasetOverviewPath(thematic, layer.id)}
+                    target='_blank'
+                    variation='achromic-outline'
+                    size='small'
+                  >
+                    View dataset <CollecticonExpandTopRight />
+                  </Button>
+                </InfoTipContent>
+              }
+              trigger='click'
+              interactive
+            >
+              <ToolbarIconButton variation='base-text'>
+                <CollecticonCircleInformation title='More info' meaningful />
+              </ToolbarIconButton>
+            </Tip>
           </Toolbar>
         </CardActions>
       </CardHeader>

app/scripts/components/common/tip.ts

@@ -1,7 +1,7 @@
 import Typpy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
 import { css } from 'styled-components';
-import { themeVal } from '@devseed-ui/theme-provider';
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 // Re-export.
 // Keeping everything tippy related in a single file
@@ -22,5 +22,9 @@ export const reactTippyStyles = () => css`
     .tippy-arrow {
       color: ${themeVal('color.base')};
     }
+
+    .tippy-content {
+      padding: ${glsp(0.25, 0.5)};
+    }
   }
 `;

app/scripts/utils/thematics.ts

@@ -3,17 +3,24 @@ import { useParams } from 'react-router';
 import vedaThematics, {
   thematics,
   discoveries,
-  datasets
+  datasets,
+  VedaDatum,
+  VedaThematicListItem
 } from 'veda/thematics';
 
 import { MDXContent, MDXModule } from 'mdx/types';
 import { S_IDLE, S_LOADING, S_SUCCEEDED } from './status';
 
+/**
+ * Interface for the Thematic area data and the related discoveries and datasets
+ */
+export type ThematicItemFull = VedaDatum<VedaThematicListItem> | null;
+
 /**
  * Returns the data for the thematic are taking the url parameter into account.
  * @returns Object
  */
-export function useThematicArea() {
+export function useThematicArea(): ThematicItemFull {
   const { thematicId } = useParams();
 
   // If there's only one thematic area, the app is setup with only one thematic

parcel-resolver-thematics/index.d.ts

@@ -222,7 +222,7 @@ declare module 'veda/thematics' {
    */
   export const thematics: VedaData<ThematicData>;
 
-  interface VedaThematicListItem extends ThematicData {
+  export interface VedaThematicListItem extends ThematicData {
     /**
      * Datasets that are related to this thematic area.
      */