When clicking on selected year, go back to full year range

client/src/components/yearrange/YearRange.js

 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { setRange, setYears, selectYears } from './yearRangeSlice';
+import { setRange, setYears, selectYears, selectRange } from './yearRangeSlice';
 import ReactEcharts from 'echarts-for-react';
 import { selectNodes, selectResultsById } from '../navbar/querySlice';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,6 +15,7 @@ export default function YearRange() {
   const nodes = useSelector(selectNodes);
   const resultsById = useSelector(selectResultsById);
   const years = useSelector(selectYears);
+  const yearRange = useSelector(selectRange);
 
   const chartRef = useRef(null);
 
@@ -40,6 +41,8 @@ export default function YearRange() {
   useEffect(() => {
     logger.debug('YearRange: registering chart handlers');
     const chart = chartRef.current.getEchartsInstance();
+    chart.off('datazoom');
+    chart.off('click');
     chart.on('datazoom', (e) => {
       const axis = chart.getModel().option.xAxis[0];
       const start = axis.data[axis.rangeStart] || config.YEARS.MIN;
@@ -47,11 +50,22 @@ export default function YearRange() {
       debouncedDispatch(setRange({ start, end }));
     });
     chart.on('click', (e) => {
+      logger.debug('Click on chart');
       const y = parseInt(e.name, 10);
-      chart.dispatchAction({ type: 'dataZoom', startValue: e.name, endValue: e.name });
-      debouncedDispatch(setRange({ start: y, end: y }));
+      const { start, end } = yearRange;
+      if (start === end) {
+        // Go back to overview
+        logger.debug('\t-> back to overview');
+        chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
+        debouncedDispatch(setRange({ start: config.YEARS.MIN, end: config.YEARS.MAX }));
+      } else {
+        // Zoom on clicked year
+        logger.debug('\t-> zoom on clicked year');
+        chart.dispatchAction({ type: 'dataZoom', startValue: e.name, endValue: e.name });
+        debouncedDispatch(setRange({ start: y, end: y }));
+      }
     });
-  }, [debouncedDispatch]);
+  }, [debouncedDispatch, yearRange]);
 
   const options = {
     tooltip: {
@@ -98,7 +112,7 @@ export default function YearRange() {
   };
 
   return (
-    <Container id='timeline'>
+    <Container id="timeline">
       <ReactEcharts
         ref={chartRef}
         option={options}