feat: pixel driller frontend

frontend/dev-proxy/proxy-table.dev.json

@@ -19,5 +19,12 @@
     "pathRewrite": {
       "^/api": "/"
     }
+  },
+  "/pixel": {
+    "target": "http://localhost",
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/pixel": "/pixel"
+    }
   }
 }

frontend/dev-proxy/proxy-table.docker.json

@@ -19,5 +19,12 @@
     "pathRewrite": {
       "^/api": "/api"
     }
+  },
+  "/pixel": {
+    "target": "http://localhost",
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/pixel": "/pixel"
+    }
   }
 }

frontend/package.json

@@ -12,6 +12,7 @@
     "@mui/icons-material": "^6.1.0",
     "@mui/lab": "^6.0.0-beta.9",
     "@mui/material": "^6.1.0",
+    "@mui/x-data-grid": "^7.24.1",
     "@mui/x-tree-view": "^7.5.0",
     "@react-hook/debounce": "^4.0.0",
     "@recoiljs/refine": "^0.1.1",

frontend/src/details/DetailsSidebar.tsx

@@ -7,6 +7,7 @@ import { AdaptationsSidebar } from './adaptations/AdaptationsSidebar';
 import { FeatureSidebar } from './features/FeatureSidebar';
 import { RegionDetails } from './regions/RegionDetails';
 import { SolutionsSidebar } from './solutions/SolutionsSidebar';
+import { PixelData } from './pixel-data/PixelData';
 
 export const showAdaptationsTableState = selector<boolean>({
   key: 'showAdaptationsTable',
@@ -18,6 +19,9 @@ export const DetailsSidebar = () => {
   const showAdaptationsTable = useRecoilValue(showAdaptationsTableState);
   return (
     <>
+      <Box mb={2}>
+        <PixelData />
+      </Box>
       <Box mb={2}>
         <SolutionsSidebar />
       </Box>

frontend/src/details/pixel-data/PixelData.tsx

@@ -0,0 +1,50 @@
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { Box, IconButton } from '@mui/material';
+import { SidePanel } from 'details/SidePanel';
+import { ErrorBoundary } from 'lib/react/ErrorBoundary';
+import { MobileTabContentWatcher } from 'lib/map/layouts/tab-has-content';
+import {
+  pixelDrillerDataHeaders,
+  pixelDrillerDataState,
+  pixelSelectionState,
+} from 'lib/state/pixel-driller';
+import { PixelDataGrid } from './PixelDataGrid';
+import { Close } from '@mui/icons-material';
+
+/**
+ * Display detailed information about a selected pixel (lat/lon point.)
+ */
+export const PixelData = () => {
+  const { data: selectedData } = useRecoilValue(pixelDrillerDataState);
+  const headers = useRecoilValue(pixelDrillerDataHeaders);
+  const setPixelSelection = useSetRecoilState(pixelSelectionState);
+
+  function clearSelectedLocation() {
+    setPixelSelection(null);
+  }
+
+  if (!selectedData) {
+    return null;
+  }
+  if (!headers.length) {
+    return null;
+  }
+  const hazards = [...new Set(selectedData.hazard)];
+
+  return (
+    <SidePanel position="relative">
+      <MobileTabContentWatcher tabId="details" />
+      <ErrorBoundary message="There was a problem displaying these details.">
+        <Box position="absolute" top={0} right={0} p={2}>
+          <IconButton onClick={clearSelectedLocation} title={'Close'}>
+            <Close />
+          </IconButton>
+        </Box>
+        {hazards.map((hazard) => (
+          <PixelDataGrid key={hazard} hazard={hazard} />
+        ))}
+      </ErrorBoundary>
+    </SidePanel>
+  );
+};

frontend/src/details/pixel-data/PixelDataGrid.tsx

@@ -0,0 +1,34 @@
+import { DataGrid } from '@mui/x-data-grid';
+
+import { pixelDrillerDataHeaders, pixelDrillerDataRows } from 'lib/state/pixel-driller';
+import { useRecoilValue } from 'recoil';
+
+const columns = [
+  { field: 'epoch', headerName: 'Epoch' },
+  { field: 'rcp', headerName: 'RCP' },
+];
+
+const returnPeriods = [10, 20, 50, 100, 200, 500];
+
+returnPeriods.forEach((rp) => {
+  columns.push({ field: `rp-${rp}`, headerName: `RP ${rp}` });
+});
+
+export const PixelDataGrid = ({ hazard }) => {
+  const headers = useRecoilValue(pixelDrillerDataHeaders);
+  const rows = useRecoilValue(pixelDrillerDataRows(hazard));
+  if (!headers.length) {
+    return null;
+  }
+  const variable = rows[0].variable;
+  const unit = rows[0].unit;
+
+  return (
+    <>
+      <h3>
+        {hazard}: {variable} ({unit})
+      </h3>
+      <DataGrid columns={columns} rows={rows} />
+    </>
+  );
+};

frontend/src/lib/state/interactions/use-interactions.ts

@@ -21,6 +21,7 @@ import {
 } from './interaction-state';
 import { RecoilStateFamily } from 'lib/recoil/types';
 import { PickingInfo } from 'deck.gl/typed';
+import { pixelSelectionState } from '../pixel-driller';
 
 function processRasterTarget(info: any): RasterTarget {
   const { bitmap, sourceLayer } = info;
@@ -118,6 +119,7 @@ export function useInteractions(
 
   const setInteractionGroupHover = useSetInteractionGroupState(hoverState);
   const setInteractionGroupSelection = useSetInteractionGroupState(selectionState);
+  const setPixelSelection = useSetRecoilState(pixelSelectionState);
 
   const [primaryGroup] = [...interactionGroups.keys()];
   const primaryGroupPickingRadius = interactionGroups.get(primaryGroup).pickingRadius;
@@ -176,6 +178,8 @@ export function useInteractions(
         setInteractionGroupSelection(groupName, selectionTarget);
       }
     }
+    const [lon, lat] = info.coordinate;
+    setPixelSelection({ lon, lat });
   };
 
   /**