feat: Line Confidence Chart: Enhanced Zooming and Interaction

src/app/LineConfidenceChart/LineConfidenceChart.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { AggregatedMeasurement, MeasurementItem } from '@upstream/upstream-api';
 import MainChart from './components/MainChart';
-import OverviewChart from './components/OverviewChart';
 import ChartTooltip, {
   TooltipData,
   PointTooltipData,
@@ -64,7 +63,6 @@ const LineConfidenceChart: React.FC<LineConfidenceChartProps> = ({
   width,
   height,
   margin = defaultChartStyles.margin,
-  showAreaOverview = defaultChartStyles.showAreaOverview,
   showLineOverview = defaultChartStyles.showLineOverview,
   pointRadius = defaultChartStyles.pointRadius,
   colors = defaultChartStyles.colors,
@@ -124,16 +122,16 @@ const LineConfidenceChart: React.FC<LineConfidenceChartProps> = ({
     minValue,
     maxValue,
     additionalSensors,
-    xFormatter,
+    xFormatter: showLineOverview ? xFormatterOverview : xFormatter,
     yFormatter,
   });
 
   // Set up brush
   useChartBrush({
     overviewRef,
     innerWidth: chartDimensions.innerWidth,
-    overviewInnerHeight: chartDimensions.overviewInnerHeight,
     overviewXScale: scales?.overviewXScale,
+    overviewInnerHeight: chartDimensions.mainInnerHeight,
     setViewDomain,
     onBrush,
   });
@@ -143,10 +141,18 @@ const LineConfidenceChart: React.FC<LineConfidenceChartProps> = ({
     return <div>No data available</div>;
   }
 
-  if (!scales || !paths || !axisTicks) {
+  if (!scales) {
     return <div>Cannot calculate chart scales</div>;
   }
 
+  if (!paths) {
+    return <div>Cannot calculate chart paths</div>;
+  }
+
+  if (!axisTicks) {
+    return <div>Cannot calculate chart axis ticks</div>;
+  }
+
   return (
     <div
       ref={containerRef}
@@ -173,20 +179,10 @@ const LineConfidenceChart: React.FC<LineConfidenceChartProps> = ({
           colorPalette={colorPalette}
           renderDataPoints={renderDataPoints}
           selectedSensorId={sensorId}
-        />
-
-        {/* Overview chart */}
-        <OverviewChart
-          showAreaOverview={showAreaOverview}
-          showLineOverview={showLineOverview}
-          paths={paths}
-          chartDimensions={chartDimensions}
-          scales={scales}
-          margin={margin}
-          colors={colors}
-          colorPalette={colorPalette}
-          xFormatterOverview={xFormatterOverview}
           overviewRef={overviewRef}
+          setViewDomain={setViewDomain}
+          onBrush={onBrush}
+          showLineOverview={showLineOverview}
         />
 
         {/* Right margin background */}

src/app/LineConfidenceChart/components/ChartTooltip.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AggregatedMeasurement, MeasurementItem } from '@upstream/upstream-api';
 import NumberFormatter from '../../common/NumberFormatter/NumberFormatter';
+import GeometryMap from '../../common/GeometryMap/GeometryMap';
 
 // Types
 export interface TooltipData {
@@ -41,7 +42,7 @@ const ChartTooltip: React.FC<ChartTooltipProps> = ({
           className="absolute bg-white border border-gray-300 rounded shadow-lg p-2 text-sm"
           style={{
             left: tooltip.x + 10,
-            top: tooltip.y - 10,
+            top: tooltip.y - 100,
             pointerEvents: 'auto',
           }}
         >
@@ -88,8 +89,13 @@ const ChartTooltip: React.FC<ChartTooltipProps> = ({
         <div
           className="absolute bg-white border border-gray-300 rounded shadow-lg p-2 text-sm"
           style={{
-            left: tooltipPoint.x + 10,
-            top: tooltipPoint.y - 10,
+            left:
+              tooltipPoint.x > window.innerWidth / 2
+                ? tooltipPoint.x - 310
+                : tooltipPoint.x + 10,
+            top: Math.min(tooltipPoint.y - 100, window.innerHeight - 310),
+            width: '300px',
+            height: '300px',
             pointerEvents: 'auto',
           }}
         >
@@ -119,7 +125,14 @@ const ChartTooltip: React.FC<ChartTooltipProps> = ({
           <div>
             Value: <NumberFormatter value={tooltipPoint.value ?? 0} />
           </div>
-          <div>Sensor ID: {tooltipPoint.sensorid}</div>
+          <div>Alias: {tooltipPoint.variablename}</div>
+          <div>
+            <div className="h-48 w-full">
+              <GeometryMap
+                geoJSON={tooltipPoint.geometry as GeoJSON.Geometry}
+              />
+            </div>
+          </div>
         </div>
       )}
     </>