chore(frontend): prettier formatting (#12)

- add a `format` script to run prettier. - change the line width from 120 to 100. - ignore the generated API client. - format frontend/src
nismod · May 22, 2024 · 2a58e39 · 2a58e39
1 parent ce4687c
commit 2a58e39
Show file tree

Hide file tree

Showing 100 changed files with 1,255 additions and 634 deletions.
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -0,0 +1,2 @@
+# ignore auto-generated code
+src/lib/api-client
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
@@ -2,6 +2,6 @@ module.exports = {
   semi: true,
   trailingComma: 'all',
   singleQuote: true,
-  printWidth: 120,
+  printWidth: 100,
   tabWidth: 2,
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -71,6 +71,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.{js,jsx}",
+    "format": "prettier --write ./src",
     "generate-client": "openapi --input http://localhost:8888/openapi.json --output ./src/lib/api-client --client fetch --name ApiClient --useOptions"
   },
   "browserslist": [

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -60,7 +60,13 @@ export const App = () => {
               <CssBaseline />
               <Nav height={globalStyleVariables.navbarHeight} navItems={navItems} />
               <Notice />
-              <Box position="absolute" top={globalStyleVariables.navbarHeight} bottom={0} left={0} right={0}>
+              <Box
+                position="absolute"
+                top={globalStyleVariables.navbarHeight}
+                bottom={0}
+                left={0}
+                right={0}
+              >
                 <Switch>
                   <Route path="/" exact>
                     <IntroPage />

diff --git a/frontend/src/Nav.tsx b/frontend/src/Nav.tsx
@@ -110,9 +110,7 @@ const DesktopNavContent: FC<{ navItems: NavItemConfig[] }> = ({ navItems }) => (
 
     {navItems.map(({ to, title, tooltip }) => (
       <NavTooltip key={to} title={tooltip} placement="bottom">
-        <ToolbarNavLink to={to}>
-          {title}
-        </ToolbarNavLink>
+        <ToolbarNavLink to={to}>{title}</ToolbarNavLink>
       </NavTooltip>
     ))}
   </>
@@ -139,7 +137,11 @@ export const Nav: FC<{ height: number; navItems: NavItemConfig[] }> = ({ height,
           height: height - topStripeHeight,
         }}
       >
-        {isMobile ? <MobileNavContent navItems={navItems} /> : <DesktopNavContent navItems={navItems} />}
+        {isMobile ? (
+          <MobileNavContent navItems={navItems} />
+        ) : (
+          <DesktopNavContent navItems={navItems} />
+        )}
       </Toolbar>
     </AppBar>
   );

diff --git a/frontend/src/Notice.tsx b/frontend/src/Notice.tsx
@@ -36,9 +36,10 @@ export const Notice = () => {
             <InfoOutlined color="primary" />
           </Box>
           <Typography paragraph>
-            The systemic risk analysis data and results shown in this tool contain licensed data that must not be shared
-            outside the Government of Jamaica. By accessing the tool, you acknowledge that you understand this and agree
-            not to download any data or share your access credentials with anyone else.{' '}
+            The systemic risk analysis data and results shown in this tool contain licensed data
+            that must not be shared outside the Government of Jamaica. By accessing the tool, you
+            acknowledge that you understand this and agree not to download any data or share your
+            access credentials with anyone else.{' '}
             <AppLink to="/data">Read more about the data</AppLink>.
           </Typography>
           <DialogActions>

diff --git a/frontend/src/asset-list/SortedAssetTable.tsx b/frontend/src/asset-list/SortedAssetTable.tsx
@@ -26,7 +26,12 @@ export const SortedAssetTable: FC<{
     setPage(1);
   }, [layerSpec, fieldSpec]);
 
-  const { features, pageInfo, loading, error } = useSortedFeatures(layerSpec, fieldSpec, page, pageSize);
+  const { features, pageInfo, loading, error } = useSortedFeatures(
+    layerSpec,
+    fieldSpec,
+    page,
+    pageSize,
+  );
 
   const handleTablePaginationChange = useCallback((event, value) => setPage(value + 1), [setPage]);
 
@@ -57,7 +62,9 @@ export const SortedAssetTable: FC<{
             )}
             {!loading &&
               !error &&
-              features.map((feature, index) => renderRow(feature, index, currentPageFirstItemIndex + index))}
+              features.map((feature, index) =>
+                renderRow(feature, index, currentPageFirstItemIndex + index),
+              )}
           </TableBody>
         </Table>
       </TableContainer>

diff --git a/frontend/src/asset-list/use-sorted-features.ts b/frontend/src/asset-list/use-sorted-features.ts
@@ -37,7 +37,12 @@ function processFeature(f: FeatureListItemOut_float_): ListFeature {
   };
 }
 
-export const useSortedFeatures = (layerSpec: LayerSpec, fieldSpec: FieldSpec, page = 1, pageSize = 50) => {
+export const useSortedFeatures = (
+  layerSpec: LayerSpec,
+  fieldSpec: FieldSpec,
+  page = 1,
+  pageSize = 50,
+) => {
   const [features, setFeatures] = useState([]);
   const [pageInfo, setPageInfo] = useState<PageInfo>(null);
   const [loading, setLoading] = useState(false);

diff --git a/frontend/src/config/assets/data-access.ts b/frontend/src/config/assets/data-access.ts
@@ -11,7 +11,9 @@ function getExpectedDamageKey(direct: boolean, hazard: string, rcp: string, epoc
 const hazardTypes = ['fluvial', 'surface', 'coastal', 'cyclone'];
 
 function totalExpectedDamagesProperty(direct: boolean, { rcp, epoch }) {
-  const hazardProperties = hazardTypes.map((ht) => featureProperty(getExpectedDamageKey(direct, ht, rcp, epoch)));
+  const hazardProperties = hazardTypes.map((ht) =>
+    featureProperty(getExpectedDamageKey(direct, ht, rcp, epoch)),
+  );
 
   return withTriggers((f) => sumOrNone(hazardProperties.map((p) => p(f))), [direct, rcp, epoch]);
 }

diff --git a/frontend/src/config/assets/data-formats.ts b/frontend/src/config/assets/data-formats.ts
@@ -58,7 +58,9 @@ function formatAdaptationValue(value: number, { field }: FieldSpec) {
 
 const ADAPTATION_DEFAULT_FORMAT: FormatConfig<number> = {
   getDataLabel: (colorField) => {
-    return `${getAdaptationFieldLabel(colorField.field)} ${paren(colorField.fieldDimensions.adaptation_name)}`;
+    return `${getAdaptationFieldLabel(colorField.field)} ${paren(
+      colorField.fieldDimensions.adaptation_name,
+    )}`;
   },
   getValueFormatted: formatAdaptationValue,
 };

diff --git a/frontend/src/config/domains/adaptation-options.json b/frontend/src/config/domains/adaptation-options.json
@@ -3356,4 +3356,4 @@
     "adaptation_name": "Flood defence around asset",
     "adaptation_protection_level": 2.5
   }
-]
+]
diff --git a/frontend/src/config/domains/adaptation-sector-layers.json b/frontend/src/config/domains/adaptation-sector-layers.json
@@ -341,4 +341,4 @@
     "asset_type": "WW Treatment Plant",
     "layer_name": "water_waste_nodes_wwtp\n"
   }
-]
+]
diff --git a/frontend/src/config/domains/adaptation.ts b/frontend/src/config/domains/adaptation.ts
@@ -1,4 +1,8 @@
-import { DataParamGroupConfig, inferDependenciesFromData, inferDomainsFromData } from 'lib/controls/data-params';
+import {
+  DataParamGroupConfig,
+  inferDependenciesFromData,
+  inferDomainsFromData,
+} from 'lib/controls/data-params';
 
 import adaptationOptions from './adaptation-options.json';
 

diff --git a/frontend/src/config/drought/metadata.ts b/frontend/src/config/drought/metadata.ts
@@ -2,7 +2,7 @@ import { ValueLabel } from 'lib/controls/params/value-label';
 
 export const DROUGHT_RISK_VARIABLES = ['mean_monthly_water_stress_', 'epd', 'eael'] as const;
 
-export type DroughtRiskVariableType = typeof DROUGHT_RISK_VARIABLES[number];
+export type DroughtRiskVariableType = (typeof DROUGHT_RISK_VARIABLES)[number];
 
 export const DROUGHT_RISK_VARIABLE_LABELS: ValueLabel<DroughtRiskVariableType>[] = [
   {
@@ -19,7 +19,11 @@ export const DROUGHT_RISK_VARIABLE_LABELS: ValueLabel<DroughtRiskVariableType>[]
   },
 ];
 
-export const DROUGHT_RISK_VARIABLES_WITH_RCP: DroughtRiskVariableType[] = ['mean_monthly_water_stress_', 'epd', 'eael'];
+export const DROUGHT_RISK_VARIABLES_WITH_RCP: DroughtRiskVariableType[] = [
+  'mean_monthly_water_stress_',
+  'epd',
+  'eael',
+];
 
 export const DROUGHT_OPTIONS_VARIABLES = [
   'cost_jmd',
@@ -28,7 +32,7 @@ export const DROUGHT_OPTIONS_VARIABLES = [
   'benefit_cost_ratio',
 ] as const;
 
-export type DroughtOptionsVariableType = typeof DROUGHT_OPTIONS_VARIABLES[number];
+export type DroughtOptionsVariableType = (typeof DROUGHT_OPTIONS_VARIABLES)[number];
 
 export const DROUGHT_OPTIONS_VARIABLE_LABELS: ValueLabel<DroughtOptionsVariableType>[] = [
   {

diff --git a/frontend/src/config/hazards/domains.ts b/frontend/src/config/hazards/domains.ts
@@ -78,8 +78,8 @@ export const HAZARD_DOMAINS: Record<string, DataParamGroupConfig<HazardParams>>
   cyclone: {
     paramDomains: {
       returnPeriod: [
-        10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000, 3000, 4000, 5000,
-        6000, 7000, 8000, 9000, 10000,
+        10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000,
+        3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000,
       ],
       epoch: [2010, 2050, 2100],
       rcp: ['baseline', '4.5', '8.5'],

diff --git a/frontend/src/config/hazards/source.ts b/frontend/src/config/hazards/source.ts
@@ -1,5 +1,8 @@
 export const HAZARD_SOURCE = {
-  getDataUrl({ hazardType, hazardParams: { returnPeriod, rcp, epoch, confidence } }, { scheme, range }) {
+  getDataUrl(
+    { hazardType, hazardParams: { returnPeriod, rcp, epoch, confidence } },
+    { scheme, range },
+  ) {
     const sanitisedRcp = rcp.replace('.', 'x');
 
     return `/raster/singleband/${hazardType}/${returnPeriod}/${sanitisedRcp}/${epoch}/${confidence}/{z}/{x}/{y}.png?colormap=${scheme}&stretch_range=[${range[0]},${range[1]}]`;

diff --git a/frontend/src/config/networks/view-layers.ts b/frontend/src/config/networks/view-layers.ts
@@ -1,5 +1,12 @@
 import { makeConfig } from 'lib/helpers';
-import { ScaleLevel, border, iconColor, iconSize, lineStyle, pointRadius } from 'lib/deck/props/style';
+import {
+  ScaleLevel,
+  border,
+  iconColor,
+  iconSize,
+  lineStyle,
+  pointRadius,
+} from 'lib/deck/props/style';
 
 import { COLORS } from '../colors';
 import { infrastructureViewLayer } from './infrastructure-view-layer';
@@ -218,7 +225,9 @@ export const INFRASTRUCTURE_VIEW_LAYERS = makeConfig<ViewLayer, string>([
   ]),
   infrastructureViewLayer('water_waste_sewer_pressure', ({ zoom, styleParams }) => [
     lineStyle(zoom),
-    strokeColor(infraStyle('water_waste_sewer_pressure', COLORS.water_wastewater.deck, styleParams)),
+    strokeColor(
+      infraStyle('water_waste_sewer_pressure', COLORS.water_wastewater.deck, styleParams),
+    ),
   ]),
   wastewaterNodesViewLayer('water_waste_nodes_sump'),
   wastewaterNodesViewLayer('water_waste_nodes_pump'),

diff --git a/frontend/src/config/solutions/domains.ts b/frontend/src/config/solutions/domains.ts
@@ -32,7 +32,7 @@ const landUseValuesConst = [
 
 export const LAND_USE_VALUES = [...landUseValuesConst];
 
-export type LandUseOption = typeof LAND_USE_VALUES[number];
+export type LandUseOption = (typeof LAND_USE_VALUES)[number];
 
 export const TERRESTRIAL_LOCATION_FILTERS = [
   {
@@ -61,7 +61,7 @@ export const TERRESTRIAL_LOCATION_FILTERS = [
   },
 ] as const;
 
-export type TerrestrialLocationFilterType = typeof TERRESTRIAL_LOCATION_FILTERS[number]['value'];
+export type TerrestrialLocationFilterType = (typeof TERRESTRIAL_LOCATION_FILTERS)[number]['value'];
 
 const marineHabitatsConst = [
   {
@@ -94,8 +94,8 @@ const marineHabitatsConst = [
   },
   {
     value: 'other',
-    label: 'Buffer Zone'
-  }
+    label: 'Buffer Zone',
+  },
 ] as const;
 
 export const MARINE_HABITATS = [...marineHabitatsConst];
@@ -105,7 +105,7 @@ export const MARINE_HABITATS_LOOKUP = toDictionary(
   (x) => x.label,
 );
 
-export type MarineHabitatType = typeof MARINE_HABITATS[number]['value'];
+export type MarineHabitatType = (typeof MARINE_HABITATS)[number]['value'];
 
 export const MARINE_LOCATION_FILTERS = [
   {
@@ -122,4 +122,4 @@ export const MARINE_LOCATION_FILTERS = [
   },
 ] as const;
 
-export type MarineLocationFilterType = typeof MARINE_LOCATION_FILTERS[number]['value'];
+export type MarineLocationFilterType = (typeof MARINE_LOCATION_FILTERS)[number]['value'];
diff --git a/frontend/src/config/solutions/landuse-hierarchy.ts b/frontend/src/config/solutions/landuse-hierarchy.ts
@@ -15,8 +15,11 @@ export const LANDUSE_HIERARCHY: TreeNode<LanduseTypeData>[] = [
         id: 'Fields: Herbaceous crops, fallow, cultivated vegetables',
         label: 'Fields: Herbaceous crops, fallow, cultivated vegetables',
       },
-      { id: 'Fields: Pasture,Human disturbed, grassland', label: 'Fields: Pasture, human-disturbed, grassland' },
-    ]
+      {
+        id: 'Fields: Pasture,Human disturbed, grassland',
+        label: 'Fields: Pasture, human-disturbed, grassland',
+      },
+    ],
   },
   { id: 'Bare Rock', label: 'Bare Rock' },
   {
@@ -27,22 +30,25 @@ export const LANDUSE_HIERARCHY: TreeNode<LanduseTypeData>[] = [
       { id: 'Bamboo and Fields', label: 'Bamboo and Fields' },
       { id: 'Bamboo and Secondary Forest', label: 'Bamboo and Secondary Forest' },
       { id: 'Fields  and Bamboo', label: 'Fields and Bamboo' },
-    ]
+    ],
   },
   { id: 'Buildings and other infrastructures', label: 'Built-up areas' },
   {
     id: 'forest',
     label: 'Forest',
     children: [
-      { id: 'Closed broadleaved forest (Primary Forest)', label: 'Closed broadleaved forest (Primary Forest)' },
+      {
+        id: 'Closed broadleaved forest (Primary Forest)',
+        label: 'Closed broadleaved forest (Primary Forest)',
+      },
       {
         id: 'Disturbed broadleaved forest (Secondary Forest)',
         label: 'Disturbed broadleaved forest (Secondary Forest)',
       },
       { id: 'Secondary Forest', label: 'Secondary Forest' },
       { id: 'Swamp Forest', label: 'Swamp Forest' },
       { id: 'Mangrove Forest', label: 'Mangrove Forest' },
-    ]
+    ],
   },
   {
     id: 'mining',
@@ -57,16 +63,22 @@ export const LANDUSE_HIERARCHY: TreeNode<LanduseTypeData>[] = [
     label: 'Mixed Use',
     children: [
       { id: 'Fields and Secondary Forest', label: 'Fields and Secondary Forest' },
-      { id: 'Fields or Secondary Forest/Pine Plantation', label: 'Fields or Secondary Forest/Pine Plantation' },
+      {
+        id: 'Fields or Secondary Forest/Pine Plantation',
+        label: 'Fields or Secondary Forest/Pine Plantation',
+      },
     ],
   },
   {
     id: 'open-dry-forest',
     label: 'Open dry forest',
     children: [
       { id: 'Open dry forest - Short', label: 'Open dry forest - Short' },
-      { id: 'Open dry forest - Tall (Woodland/Savanna)', label: 'Open dry forest - Tall (Woodland/Savanna)' },
-    ]
+      {
+        id: 'Open dry forest - Tall (Woodland/Savanna)',
+        label: 'Open dry forest - Tall (Woodland/Savanna)',
+      },
+    ],
   },
   {
     id: 'plantation',
@@ -80,14 +92,12 @@ export const LANDUSE_HIERARCHY: TreeNode<LanduseTypeData>[] = [
         id: 'Plantation: Tree crops, shrub crops, sugar cane, banana',
         label: 'Plantation: Tree crops, shrub crops, sugar cane, banana',
       },
-    ]
+    ],
   },
   { id: 'Water Body', label: 'Water Body' },
   {
     id: 'wetland',
     label: 'Wetland',
-    children: [
-      { id: 'Herbaceous Wetland', label: 'Herbaceous Wetland' },
-    ]
+    children: [{ id: 'Herbaceous Wetland', label: 'Herbaceous Wetland' }],
   },
 ];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# ignore auto-generated code
		src/lib/api-client
-Original file line number
+Diff line change
@@ Expand Up / @@ -3356,4 +3356,4 @@ @@
         "adaptation_name": "Flood defence around asset",
         "adaptation_protection_level": 2.5
       }
-    ]
+    ]