chore(frontend): format with prettier

frontend/src/Nav.tsx

@@ -48,8 +48,10 @@ const ToolbarLink = styled(Link)({
 
 const ToolbarLinkWithRef = (props, ref) => (
   <ToolbarLink component={RouterNavLink} ref={ref} {...props} />
-);  
-const ToolbarNavLink = forwardRef<HTMLAnchorElement, LinkProps & RouterLinkProps>(ToolbarLinkWithRef);
+);
+const ToolbarNavLink = forwardRef<HTMLAnchorElement, LinkProps & RouterLinkProps>(
+  ToolbarLinkWithRef,
+);
 
 const DrawerLinkWithRef = (props, ref) => (
   <DrawerLink component={RouterNavLink} ref={ref} {...props} />
@@ -94,18 +96,18 @@ const MobileNavContent: FC<{ navItems: NavItemConfig[] }> = ({ navItems }) => {
       <MobileDrawer open={drawerOpen} onClose={closeDrawer}>
         <Toolbar /> {/* Prevents app bar from concealing content*/}
         <List>
-          <ListItem disablePadding >
+          <ListItem disablePadding>
             <DrawerNavLink to="/" onClick={closeDrawer}>
               Home
             </DrawerNavLink>
           </ListItem>
           {navItems.map(({ to, title, tooltip }) => (
             <NavTooltip key={to} title={tooltip} placement="right">
-              <ListItem disablePadding >
+              <ListItem disablePadding>
                 <DrawerNavLink to={to} onClick={closeDrawer}>
                   {title}
                 </DrawerNavLink>
-            </ListItem>
+              </ListItem>
             </NavTooltip>
           ))}
         </List>

frontend/src/lib/data-map/MapContextProviderWithLimits.tsx

@@ -29,9 +29,9 @@ export const MapContextProviderWithLimits: FC<{
 
   const extendedContext = useMemo(
     () => ({
-        ...omit(baseContext, 'viewport'),
-        viewport: { ...plainViewport, minPitch, maxPitch, minZoom, maxZoom } as any
-      }),
+      ...omit(baseContext, 'viewport'),
+      viewport: { ...plainViewport, minPitch, maxPitch, minZoom, maxZoom } as any,
+    }),
     [baseContext, plainViewport, minPitch, maxPitch, minZoom, maxZoom],
   );
   return <MapContext.Provider value={extendedContext}>{children}</MapContext.Provider>;

frontend/src/lib/data-map/interactions/use-interactions.ts

@@ -117,10 +117,7 @@ export function useInteractions(
   const setInteractionGroupHover = useSetInteractionGroupState(hoverState);
   const setInteractionGroupSelection = useSetInteractionGroupState(selectionState);
 
-  const interactionGroupLookup = useMemo(
-    () => keyBy(interactionGroups, 'id'),
-    [interactionGroups],
-  );
+  const interactionGroupLookup = useMemo(() => keyBy(interactionGroups, 'id'), [interactionGroups]);
 
   const primaryGroup = interactionGroups[0].id;
   const primaryGroupPickingRadius = interactionGroupLookup[primaryGroup].pickingRadius;

frontend/src/lib/recoil/grouped-family.ts

@@ -14,9 +14,7 @@ export function groupedFamily<FVT, FPT>(
       (group) =>
       ({ get }) => {
         const groupParams = get(paramsFamily(group));
-        const deps = fromPairs(
-          groupParams.map((param) => [param, family(paramFn(group, param))]),
-        );
+        const deps = fromPairs(groupParams.map((param) => [param, family(paramFn(group, param))]));
         return get(waitForAll(deps));
       },
   });

frontend/src/pages/GuidePage.tsx

@@ -309,8 +309,8 @@ export const GuidePage = () => (
     <p>
       On the “Adaptation” page, the second sidebar section contains controls to show drought risk
       and drought-related adaptation options. Select for example “Population at risk” to see areas
-      coloured by risk and &ldquo;Population protected&rdquo; to see points representing approximate locations
-      of options to reduce the impacts of drought.
+      coloured by risk and &ldquo;Population protected&rdquo; to see points representing approximate
+      locations of options to reduce the impacts of drought.
     </p>
     <p>
       <img alt="" src="/guide_media/image21.png" />

frontend/src/pages/IntroPage.tsx

@@ -90,8 +90,8 @@ export const IntroPage = () => (
               in the Environmental Change Institute, University of Oxford, with the Government of
               Jamaica (GoJ), funded by UK Aid through the UK Foreign and Commonwealth Development
               Office (FCDO). The initiative forms part of the Coalition for Climate Resilient
-              Investment’s (CCRI) work on “Systemic Resilience” in collaboration with the
-              Green Climate Fund.
+              Investment’s (CCRI) work on “Systemic Resilience” in collaboration
+              with the Green Climate Fund.
             </p>
 
             <Stack

frontend/src/state/is-retina.ts

@@ -3,14 +3,13 @@ import { atom } from 'recoil';
 interface WindowWithDevicePixelRatio extends Window {
   devicePixelRatio: number;
   screen: ScreenWithDPR;
-};
+}
 
 interface ScreenWithDPR extends Screen {
   deviceXDPI: number;
   logicalXDPI: number;
 }
 
-
 function checkIsRetina() {
   // taken from Leaflet source: https://github.com/Leaflet/Leaflet/blob/ee71642691c2c71605bacff69456760cfbc80a2a/src/core/Browser.js#L119
   const windowWithDPR = window as unknown as WindowWithDevicePixelRatio;

frontend/src/state/view.ts

@@ -23,10 +23,7 @@ export const viewStateEffect: StateEffect<string> = ({ set }, view, previousView
   const viewSectionsConfig = VIEW_SECTIONS[view];
 
   const previousViewSectionsConfig = VIEW_SECTIONS[previousView];
-  const removedSections = difference(
-    keys(previousViewSectionsConfig),
-    keys(viewSectionsConfig),
-  );
+  const removedSections = difference(keys(previousViewSectionsConfig), keys(viewSectionsConfig));
 
   removedSections.forEach((section) => {
     set(sectionVisibilityState(section), false);