Crop Latvia feature, fixed spinner

web/src/harmonie/GribFile.tsx

@@ -1,4 +1,4 @@
-import { Accessor, Component, createSignal, Setter } from 'solid-js'
+import { Accessor, Component, createEffect, createMemo, createSignal, Setter } from 'solid-js'
 
 import styles from './harmonie.module.css'
 import { apiHost } from '../consts'
@@ -14,16 +14,17 @@ export const GribFile: Component<{
     isActive: Accessor<boolean>,
     getCanvas: Accessor<HTMLCanvasElement | undefined>,
     setIsLoading: Setter<boolean>,
+    getIsCrop: Accessor<boolean>,
     onClick: (name: string) => void,
 }> = ({
     name,
     isActive,
     getCanvas,
     setIsLoading,
+    getIsCrop,
     onClick,
 }) => {
     const [getGribList, setGribList] = createSignal<GribMessage[]>([])
-    const isCrop = createSignal(false)
 
     function onFileClick() {
         onClick(name)
@@ -39,6 +40,16 @@ export const GribFile: Component<{
     let cachedBuffers: Uint8Array[] = []
     let cachedBitmasks: Uint8Array[] = []
 
+    createEffect(async () => {
+        setIsLoading(true)
+        const cropBounds = getIsCrop() ? CROP_BOUNDS : undefined
+        // hack to show loading spinner
+        await new Promise(resolve => setTimeout(resolve, 100))
+        if (cachedMessages.length === 0) return;
+        drawGrib(getCanvas()!, cachedMessages, cachedBuffers, cachedBitmasks, cropBounds)
+        setIsLoading(false)
+    })
+
     function onParamClick(paramId: number) {
         setIsLoading(true);
         const grib = getGribList()[paramId]
@@ -66,7 +77,7 @@ export const GribFile: Component<{
             cachedMessages = messages
             cachedBuffers = binaryBuffers.map(b => new Uint8Array(b))
             cachedBitmasks = bitmasks.map(b => new Uint8Array(b))
-            const cropBounds = isCrop[0]() ? CROP_BOUNDS : undefined 
+            const cropBounds = getIsCrop() ? CROP_BOUNDS : undefined 
             drawGrib(getCanvas()!, cachedMessages, cachedBuffers, cachedBitmasks, cropBounds)
         })
         .catch(err => console.warn(err.message))

web/src/harmonie/Harmonie.tsx

@@ -10,6 +10,7 @@ export const Harmonie: Component<{}> = () => {
     const [getActiveGrib, setActiveGrib] = createSignal('')
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>()
     const [getIsLoading, setIsLoading] = createSignal(true)
+    const [getIsCrop, setIsCrop] = createSignal(true)
 
     fetch(`${apiHost}/api/show/grib-list`)
         .then(re => re.json())
@@ -21,6 +22,10 @@ export const Harmonie: Component<{}> = () => {
 
     return <div class={styles.container}>
         <div class={styles.column}>
+            <label>
+                Crop Latvia
+                <input type='checkbox' checked={getIsCrop()} onChange={()=>setIsCrop(!getIsCrop())} />
+            </label>
             <ul class={styles.fileList}>
                 {getFileList().map(fileName =>
                     <GribFile 
@@ -28,6 +33,7 @@ export const Harmonie: Component<{}> = () => {
                         isActive={() => getActiveGrib() === fileName}
                         getCanvas={getCanvas}
                         setIsLoading={setIsLoading}
+                        getIsCrop={getIsCrop}
                         onClick={() => setActiveGrib(fileName)}
                     />
                 )}