Merge pull request #64 from mit-jp/aesthetic-changes

various changes to improve website aesthetics

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

backend/.env.template

@@ -1,4 +1,4 @@
 APP_URL="127.0.0.1"
 APP_PORT=8080
 EDITOR_PORT=4040
-DATABASE_URL=postgres://username:password@host:5432/database
+DATABASE_URL=postgres://username:password@localhost:5432/database

backend/migrations/20230713151745_change-subcategories.sql

@@ -0,0 +1,39 @@
+UPDATE
+    subcategory
+SET
+    "order" = 3
+WHERE
+    "order" = 2;
+
+INSERT INTO
+    subcategory (name, "order")
+VALUES
+    ('Transitional Risk Metrics', 2);
+
+UPDATE
+    map_visualization
+SET
+    subcategory = 3
+WHERE
+    id IN (64, 90);
+
+UPDATE
+    data_category
+SET
+    name = 'combinatory metrics'
+WHERE
+    "order" = -1;
+
+UPDATE
+    subcategory
+SET
+    name = 'Diversity and Equity Metrics'
+WHERE
+    name = 'Environmental Equity';
+
+UPDATE
+    map_visualization
+SET
+    subcategory = 3
+WHERE
+    id = 64;

backend/migrations/20230830102420_rename_risk_metrics.sql

@@ -0,0 +1,6 @@
+UPDATE
+    subcategory
+SET
+    name = 'Physical Risk Metrics'
+WHERE
+    name = 'Risk Metrics';

backend/src/controller/data_controller.rs

@@ -9,6 +9,7 @@ use serde::Deserialize;
 pub fn init(cfg: &mut web::ServiceConfig) {
     cfg.service(get_by_dataset);
     cfg.service(get_percentiles);
+    cfg.service(get_state_percentiles);
     cfg.service(get_by_map_visualization);
 }
 
@@ -104,6 +105,22 @@ async fn get_percentiles(
     }
 }
 
+#[get("/state_percentile")]
+async fn get_state_percentiles(
+    info: web::Query<PercentileInfo>,
+    app_state: web::Data<AppState<'_>>,
+) -> impl Responder {
+    let data = app_state.database.data.state_percentile(info.into_inner()).await;
+
+    match data {
+        Ok(data) => match csv_converter::convert(data) {
+            Ok(csv) => HttpResponse::Ok().content_type("text/csv").body(csv),
+            Err(_) => HttpResponse::NotFound().finish(),
+        },
+        Err(_) => HttpResponse::NotFound().finish(),
+    }
+}
+
 #[delete("/dataset/{dataset}/data")]
 async fn delete(app_state: web::Data<AppState<'_>>, dataset: web::Path<i32>) -> impl Responder {
     let result = app_state

backend/src/dao/data_dao.rs

@@ -174,6 +174,129 @@ impl<'c> Table<'c, Data> {
         .await
     }
 
+    /**
+     * The state-level percentile for a given geo-id for all datasets in a category
+     */
+    pub async fn state_percentile(
+        &self,
+        info: PercentileInfo,
+    ) -> Result<Vec<data::Percentile>, sqlx::Error> {
+        sqlx::query_as!(
+            data::Percentile,
+            r#"
+        SELECT
+            entry.dataset,
+            entry.dataset_name,
+            entry.source as "source!",
+            entry.start_date as "start_date!",
+            entry.end_date as "end_date!",
+            entry.units,
+            entry.formatter_type,
+            entry.decimals,
+            (
+                SELECT
+                    value
+                FROM
+                    (SELECT * FROM data
+                    WHERE FLOOR(id / 1000) = FLOOR($1 / 1000)) AS state_data
+                WHERE
+                    id =($1)
+                    AND dataset = entry.dataset
+                    AND source = entry.source
+                    AND start_date = entry.start_date
+                    AND end_date = entry.end_date
+            ),
+            CASE WHEN (
+                SELECT
+                    value
+                FROM
+                    (SELECT * FROM data
+                    WHERE FLOOR(id / 1000) = FLOOR($1 / 1000)) AS state_data
+                WHERE
+                    id =($1)
+                    AND dataset = entry.dataset
+                    AND source = entry.source
+                    AND start_date = entry.start_date
+                    AND end_date = entry.end_date
+            ) IS NULL THEN NULL ELSE
+            percent_rank(
+                (
+                    SELECT
+                        CASE WHEN entry.invert_normalized THEN -value ELSE value END as value
+                    FROM
+                        (SELECT * FROM data
+                        WHERE FLOOR(id / 1000) = FLOOR($1 / 1000)) AS state_data
+                    WHERE
+                        id =($1)
+                        AND dataset = entry.dataset
+                        AND source = entry.source
+                        AND start_date = entry.start_date
+                        AND end_date = entry.end_date
+                )
+            ) within GROUP (
+                ORDER BY CASE WHEN entry.invert_normalized THEN -value ELSE value END
+            )
+        END
+        FROM
+            (SELECT * FROM data
+            WHERE FLOOR(id / 1000) = FLOOR($1 / 1000)) AS state_data,
+            (
+                SELECT
+                    map_visualization.dataset,
+                    dataset.name as dataset_name,
+                    COALESCE(default_source, source) AS source,
+                    COALESCE(default_start_date, start_date) AS start_date,
+                    COALESCE(default_end_date, end_date) AS end_date,
+                    invert_normalized,
+                    units,
+                    formatter_type,
+                    decimals
+                FROM
+                    map_visualization,
+                    map_visualization_collection,
+                    dataset,
+                    (
+                        SELECT
+                            dataset,
+                            MAX(end_date) AS end_date,
+                            MAX(start_date) AS start_date,
+                            MAX("source") AS source
+                        FROM
+                            data
+                        GROUP BY
+                            dataset
+                    ) AS cd
+                WHERE
+                    map_visualization_collection.category = $2
+                    AND map_visualization.dataset = dataset.id
+                    AND cd.dataset = map_visualization.dataset
+                    AND map_visualization_collection.map_visualization = map_visualization.id
+                    AND dataset.geography_type = $3
+            ) AS entry
+        WHERE
+            state_data.dataset = entry.dataset
+            AND state_data.source = entry.source
+            AND state_data.start_date = entry.start_date
+            AND state_data.end_date = entry.end_date
+        GROUP BY
+            entry.dataset,
+            entry.dataset_name,
+            entry.source,
+            entry.start_date,
+            entry.end_date,
+            entry.units,
+            entry.formatter_type,
+            entry.decimals,
+            entry.invert_normalized;
+        "#,
+            info.geo_id,
+            info.category,
+            info.geography_type
+        )
+        .fetch_all(&*self.pool)
+        .await
+    }
+
     pub async fn insert(&self, data: &HashSet<Creator>) -> Result<PgQueryResult, sqlx::Error> {
         let mut ids: Vec<i32> = Vec::with_capacity(data.len());
         let mut sources: Vec<i32> = Vec::with_capacity(data.len());

frontend/src/ChoroplethMap.tsx

@@ -11,6 +11,7 @@ import { getDomain } from './DataProcessor'
 import { getLegendFormatter } from './Formatter'
 import Legend from './Legend'
 import { MapType, MapVisualization } from './MapVisualization'
+import { ZOOM_TRANSITION } from './MapWrapper'
 import ProbabilityDensity from './ProbabilityDensity'
 import StateMap from './StateMap'
 import { TopoJson } from './TopoJson'
@@ -87,7 +88,7 @@ function ChoroplethMap(
 
     return (
         <>
-            <g id={css.counties} transform={transform} ref={ref}>
+            <g id={css.counties} transform={transform} style={ZOOM_TRANSITION} ref={ref}>
                 {borders.map((region) => (
                     <path
                         key={region.id}

frontend/src/Color.ts

@@ -23,6 +23,10 @@ export const redBlue = scaleThreshold<number, string, never>(
     [0.05, 0.25, 0.75, 0.95],
     [...schemeRdYlBu[5]].reverse()
 )
+export const redBlueReportCard = scaleThreshold<number, string, never>(
+    [0.01, 0.05, 0.25, 0.33, 0.5, 0.66, 0.75, 0.95, 0.99],
+    [...schemeRdYlBu[10]].reverse()
+)
 
 const colorScheme = (
     map: MapVisualization,

frontend/src/CountryNavigation.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton, ToggleButtonGroup } from '@mui/material'
+import { Select, MenuItem, SelectChangeEvent, InputLabel, FormControl } from '@mui/material'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -25,23 +25,41 @@ export default function RegionNavigation() {
 
     return (
         <nav className={css.regionNav}>
-            <ToggleButtonGroup
-                value={region}
-                exclusive
-                onChange={(_, region: Region) => {
-                    if (region != null) {
-                        onChange(region)
-                    }
-                }}
-                aria-label="geography type"
-            >
-                <ToggleButton value="World" aria-label="world">
-                    World
-                </ToggleButton>
-                <ToggleButton value="USA" aria-label="usa">
-                    USA
-                </ToggleButton>
-            </ToggleButtonGroup>
+            <FormControl>
+                <InputLabel
+                    id="region-label"
+                    disableAnimation
+                    style={{ color: '#000', fontWeight: 'bold' }}
+                >
+                    Region
+                </InputLabel>
+                <Select
+                    label="Region"
+                    value={region}
+                    onChange={(event: SelectChangeEvent) => {
+                        if (region != null) {
+                            onChange(event.target.value as Region)
+                        }
+                    }}
+                    MenuProps={{
+                        disableScrollLock: true,
+                    }}
+                    aria-label="geography type"
+                    sx={{
+                        color: 'black',
+                        fontWeight: 'bold',
+                    }}
+                    style={{ backgroundColor: '#d9dee4' }}
+                    autoWidth
+                >
+                    <MenuItem value="World" aria-label="world">
+                        World
+                    </MenuItem>
+                    <MenuItem value="USA" aria-label="usa">
+                        USA
+                    </MenuItem>
+                </Select>
+            </FormControl>
         </nav>
     )
 }

frontend/src/EmptyMap.tsx

@@ -2,6 +2,7 @@ import { geoPath } from 'd3'
 import type { GeoJsonProperties } from 'geojson'
 import { feature } from 'topojson-client'
 import type { GeometryCollection } from 'topojson-specification'
+import { ZOOM_TRANSITION } from './MapWrapper'
 import { GeoMap } from './appSlice'
 
 const path = geoPath()
@@ -15,7 +16,7 @@ function EmptyMap({ map, transform }: { map: GeoMap; transform?: string }) {
     ).features
 
     return (
-        <g transform={transform}>
+        <g transform={transform} style={ZOOM_TRANSITION}>
             {borders.map((region) => (
                 <path
                     // some countries like N. Cyprus and Kosovo don't have an id, so use the name instead

frontend/src/Header.module.css

@@ -5,9 +5,17 @@
 }
 
 .header h1 {
-    font-weight: 500;
+    font-size: 40pt;
+    font-weight: 1000;
     color: #11598d;
-    font-family: 'Merriweather', serif;
+    font-family: 'Tahoma', sans-serif;
+    margin-top: .25em;
+}
+
+.header p {
+    font-size: larger;
+    margin-top: -1.75em;
+    margin-bottom: 2em;
 }
 
 .title {
@@ -36,10 +44,12 @@
     }
     .header h1 {
         margin: 0;
+        font-size: 30pt;
     }
 
     .header p {
         margin: 0;
+        font-size: medium;
     }
 
     .title-and-subtitle {

frontend/src/Header.tsx

@@ -7,10 +7,10 @@ function Header() {
         <header className={css.header}>
             <div className={css.title}>
                 <div className={css.titleAndSubtitle}>
-                    <h1>STRESS Tool</h1>
+                    <h1>STRESS Platform</h1>
                     <p>
-                        System for the Triage of Risks from Environmental and Socio-Economic
-                        Stressors.
+                        <b>S</b>ystem for the <b>T</b>riage of <b>R</b>isks from <b>E</b>
+                        nvironmental and <b>S</b>ocio-economic <b>S</b>tressors
                     </p>
                 </div>
             </div>