Polish

damienallen · Jun 13, 2024 · 4bbb5ce · 4bbb5ce
1 parent 492b08b
commit 4bbb5ce
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 81 deletions.
diff --git a/app/src/components/ControlPanel.tsx b/app/src/components/ControlPanel.tsx
@@ -26,10 +26,10 @@ const useStyles = createUseStyles({
 })
 
 export const ControlPanel = observer(() => {
-    const { ui } = useStores()
+    const { contours, ui } = useStores()
     const classes = useStyles()
 
-    return ui.showControls ? (
+    return ui.showControls && !contours.areProcessing ? (
         <div className={classes.container}>
             <ControlsForm />
         </div>

diff --git a/app/src/components/ControlsForm.tsx b/app/src/components/ControlsForm.tsx
@@ -1,15 +1,7 @@
-import {
-    Blockquote,
-    LoadingOverlay,
-    NativeSelect,
-    RangeSlider,
-    RangeSliderValue,
-} from '@mantine/core'
+import { Blockquote, NativeSelect, RangeSlider, RangeSliderValue } from '@mantine/core'
 
 import { ControlsItem } from './ControlsItem'
 import { HideButton } from './HideButton'
-import { Progress } from './Progress'
-import { UpdateButton } from './UpdateButton'
 import { createUseStyles } from 'react-jss'
 import { observer } from 'mobx-react'
 import { useStores } from '../stores'
@@ -55,17 +47,8 @@ export const ControlsForm = observer(() => {
         </div>
     )
 
-    return ui.showControls ? (
+    return (
         <div className={classes.container}>
-            <LoadingOverlay
-                visible={contours.areProcessing}
-                loaderProps={{
-                    children: <Progress color="black" />,
-                }}
-                zIndex={150}
-                overlayProps={{ blur: 2 }}
-            />
-
             <Blockquote className={classes.description} color="gray" cite={source} mt="xl">
                 Annual maximum land surface temperature (LST).
             </Blockquote>
@@ -74,7 +57,7 @@ export const ControlsForm = observer(() => {
                 <NativeSelect
                     value="Max. Surface Temp."
                     data={['Max. Surface Temp.']}
-                    onChange={(e: React.ChangeEvent) => console.log(e)}
+                    onChange={(e) => console.log(e)}
                     disabled={contours.areProcessing}
                 />
             </ControlsItem>
@@ -83,9 +66,19 @@ export const ControlsForm = observer(() => {
                 <NativeSelect
                     value={contours.year}
                     data={contours.availableYears.map(String)}
-                    onChange={(e: React.ChangeEvent) =>
-                        contours.setYear((e.currentTarget as HTMLInputElement).value)
-                    }
+                    onChange={(e) => contours.setYear(e.currentTarget.value)}
+                    disabled={contours.areProcessing}
+                />
+            </ControlsItem>
+
+            <ControlsItem label="Reference">
+                <NativeSelect
+                    value={ui.absoluteReference ? 'absolute' : 'relative'}
+                    data={[
+                        { label: 'Absolute', value: 'absolute' },
+                        { label: 'Relative to Mean', value: 'relative' },
+                    ]}
+                    onChange={(e) => ui.setAbsoluteReference(e.currentTarget.value === 'absolute')}
                     disabled={contours.areProcessing}
                 />
             </ControlsItem>
@@ -100,7 +93,7 @@ export const ControlsForm = observer(() => {
                         min={0}
                         max={3}
                         marks={[
-                            { value: 0.0, label: 'x̄' },
+                            { value: 0.0, label: 'mean' },
                             { value: 0.5 },
                             { value: 1.0, label: 'σ' },
                             { value: 1.5 },
@@ -117,8 +110,7 @@ export const ControlsForm = observer(() => {
 
             <div className={classes.actionButtons}>
                 <HideButton />
-                <UpdateButton />
             </div>
         </div>
-    ) : null
+    )
 })
diff --git a/app/src/components/Legend.tsx b/app/src/components/Legend.tsx
@@ -22,11 +22,12 @@ const useStyles = createUseStyles({
         padding: '4px 8px',
         borderRadius: 4,
         minWidth: 60,
+        textAlign: 'center',
     },
 })
 
 export const Legend = observer(() => {
-    const { contours } = useStores()
+    const { contours, ui } = useStores()
     const classes = useStyles()
 
     if (contours.stats == undefined || contours.thresholds.length < 1) {
@@ -54,14 +55,18 @@ export const Legend = observer(() => {
     let items = []
     for (let ind = 0; ind < contours.thresholds.length; ind++) {
         const opacity = (0.8 * (ind + 1)) / (contours.thresholds.length + 1)
-        const tempDifference = Math.round(contours.thresholds[ind] - contours.stats.mean)
+
+        const temperature = ui.absoluteReference
+            ? Math.round(contours.thresholds[ind])
+            : `+${Math.round(contours.thresholds[ind] - contours.stats.mean)}`
+
         items.push(
             <div
                 key={`threshold-${ind}`}
                 className={classes.threholdItem}
                 style={{ background: `rgba(255, 0, 0, ${opacity})` }}
             >
-                +{tempDifference}°C
+                {temperature}°C
             </div>
         )
     }

diff --git a/app/src/components/UpdateButton.tsx b/app/src/components/UpdateButton.tsx
diff --git a/app/src/stores.tsx b/app/src/stores.tsx
@@ -143,7 +143,6 @@ export class ContoursStore {
 
     public areProcessing: boolean = true
     public layers: any[] = []
-    public lastJson: string = ''
 
     public range: RangeSliderValue = [1.0, 2.0]
     public annualData: AnnualData[] = []
@@ -159,16 +158,16 @@ export class ContoursStore {
         this.layers = value
     }
 
-    setLastJson = () => {
-        this.lastJson = this.json
-    }
-
     setRange = (value: RangeSliderValue) => {
         this.range = value
+        this.root.ui.toggleShowControls()
+        this.processContours()
     }
 
     setYear = (value: string | number) => {
         this.year = Number(value)
+        this.root.ui.toggleShowControls()
+        this.processContours()
     }
 
     setSelected = (properties: FeatureProperties) => {
@@ -266,12 +265,10 @@ export class ContoursStore {
 
         const latestYear = this.annualData.reduce((max, s) => (s.year > max.year ? s : max))
         this.setYear(latestYear.year)
-        this.processContours()
     }
 
     processContours = async () => {
         if (this.stats && this.url) {
-            this.setLastJson()
             this.setAreProcessing(true)
 
             worker.postMessage({
@@ -303,6 +300,7 @@ export class UIStore {
     public showAbout: boolean = false
     public showControls: boolean = false
     public showStyleMenu: boolean = false
+    public absoluteReference: boolean = false
 
     public colorScheme: MantineColorScheme = 'light'
 
@@ -326,15 +324,12 @@ export class UIStore {
         this.showControls = value
     }
 
-    toggleColorScheme = () => {
-        this.colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark'
+    setAbsoluteReference = (value: boolean) => {
+        this.absoluteReference = value
     }
 
-    get disableUpdate() {
-        return (
-            this.root.contours.areProcessing ||
-            this.root.contours.lastJson === this.root.contours.json
-        )
+    toggleColorScheme = () => {
+        this.colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark'
     }
 
     get theme() {