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)] as string[];
+
+  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,25 @@
+import { DataGrid } from '@mui/x-data-grid';
+
+import { pixelDrillerDataHeaders, pixelDrillerDataRows } from 'lib/state/pixel-driller';
+import { useRecoilValue } from 'recoil';
+
+const columns = [
+  { field: 'variable', headerName: 'Variable' },
+  { field: 'band_data', headerName: 'Band Data' },
+  { field: 'unit', headerName: 'Unit' },
+  { field: 'rp', headerName: 'Return Period' },
+];
+
+export const PixelDataGrid = ({ hazard }) => {
+  const headers = useRecoilValue(pixelDrillerDataHeaders);
+  const rows = useRecoilValue(pixelDrillerDataRows(hazard));
+  if (!headers.length) {
+    return null;
+  }
+  return (
+    <>
+      <h3>{hazard}</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 });
   };
 
   /**

frontend/src/lib/state/pixel-driller.ts

@@ -0,0 +1,113 @@
+import { atom, noWait, RecoilState, RecoilValueReadOnly, selector, selectorFamily } from 'recoil';
+
+const parameters = {
+  cyclone: {
+    epoch: 2010,
+    rcp: 'baseline',
+    confidence: 95,
+  },
+  fluvial: {
+    rcp: 'baseline',
+    epoch: 2010,
+  },
+  surface: {
+    rcp: 'baseline',
+    epoch: 2010,
+  },
+};
+
+const returnPeriods = [10, 20, 50, 100, 200, 500];
+
+type PixelDrillerQueryParams = {
+  lat: number;
+  lon: number;
+};
+
+/**
+ * Latitude and longitude of the selected map pixel.
+ */
+export const pixelSelectionState: RecoilState<PixelDrillerQueryParams> = atom({
+  key: 'pixelSelection',
+  default: { lat: 0, lon: 0 },
+});
+
+/**
+ * Query to fetch hazard data for the selected map pixel.
+ */
+const pixelDrillerQuery = selector({
+  key: 'pixelDrillerQuery',
+  get: async ({ get }) => {
+    const { lat, lon } = get(pixelSelectionState);
+    const response = await fetch(`/pixel/${lon.toFixed(3)}/${lat.toFixed(3)}`);
+    const data = await response.json();
+    return data;
+  },
+});
+
+/**
+ * Loadable state for the current pixel driller data.
+ */
+export const pixelDrillerDataState = selector({
+  key: 'pixelDrillerDataState',
+  get: ({ get }) => {
+    const loadable = get(noWait(pixelDrillerQuery));
+    const data = loadable.state === 'hasValue' ? loadable.contents : null;
+    const error = loadable.state === 'hasError' ? loadable.contents : null;
+    return { data, error };
+  },
+});
+
+/**
+ * Column headers for the pixel driller data tables.
+ */
+export const pixelDrillerDataHeaders: RecoilValueReadOnly<string[]> = selector({
+  key: 'pixelDrillerDataHeaders',
+  get: ({ get }) => {
+    const pixelData = get(pixelDrillerDataState).data;
+    if (!pixelData) {
+      return [];
+    }
+    const headers = Object.keys(pixelData);
+    return headers;
+  },
+});
+
+function getPixelDataRows(pixelData, headers: string[], hazard: string) {
+  const rows = pixelData[headers[0]]
+    .map((_, rowNumber) => {
+      const row = { id: rowNumber };
+      headers.forEach((header) => {
+        row[header] = pixelData[header][rowNumber];
+      });
+      return row;
+    })
+    .map((row) => ({ ...row, band_data: row.band_data?.toFixed(2) }))
+    .filter((row) => row.hazard === hazard)
+    .filter((row) => returnPeriods.includes(row.rp))
+    .filter((row) => {
+      if (parameters[hazard]) {
+        const { rcp, epoch, confidence } = parameters[hazard];
+        if (confidence) {
+          return rcp === rcp && row.epoch === epoch && row.confidence === confidence;
+        }
+        return rcp === rcp && row.epoch === epoch;
+      }
+      return true;
+    });
+  return rows;
+}
+
+type Row = Record<string, string | number>;
+/**
+ * Rows of pixel driller data for a specific hazard, epoch, RCP, and confidence level.
+ */
+export const pixelDrillerDataRows: (hazard: string) => RecoilValueReadOnly<Row[]> = selectorFamily({
+  key: 'pixelDrillerDataRows',
+  get:
+    (hazard: string) =>
+    ({ get }) => {
+      const pixelData = get(pixelDrillerDataState).data;
+      const headers = get(pixelDrillerDataHeaders);
+      return getPixelDataRows(pixelData, headers, hazard);
+    },
+});