make arrow density input a selector

- also tweak the padding and height of things to make them look slightly less hacky

Author: honzaflash

viewer/src/pages/app.tsx

@@ -38,6 +38,9 @@ const TILE_STYLE_OPTIONS: { value: string, label: string }[] = [
     { value: 'vector-arrow/none', label: 'vector-arrow/none' },
 ];
 
+const ARROW_DENSITY_OPTIONS: { value: string, label: string }[] =
+    [1, 2, 3].map((n) => ({ value: n, label: n }))
+
 const TILE_SIZE = 512;
 
 function App() {
@@ -529,7 +532,7 @@ function App() {
                     />
                 </div>
                 {selectedLayers && (
-                    <div className="absolute bottom-9 right-2 md:right-4 h-50 w-72 md:w-96 bg-white rounded-md bg-opacity-70 flex flex-col items-center content-center">
+                    <div className="absolute bottom-9 right-2 md:right-4 h-55 w-72 md:w-96 bg-white rounded-md bg-opacity-70 flex flex-col items-center content-center">
                         <span className="text-center">
                             {selectedLayers.dataset} - {joinedLayers}
                         </span>
@@ -691,7 +694,7 @@ function App() {
                                     />
                                 </div>
                                 <div
-                                    className={'flex flex-row items-center pt-2'}
+                                    className={'flex flex-row items-center py-1'}
                                 >
                                     <span className={'pl-1'}>Tile style:</span>
                                     <SimpleSelect
@@ -713,34 +716,24 @@ function App() {
                                 </div>
                                 {selectedLayers.variables.size > 1 &&
                                     <div
-                                        className={'flex flex-row items-center pt-2'}
+                                        className={'flex flex-row items-center py-1'}
                                     >
                                         <span className={'pl-1'}>Arrow density:</span>
-                                        <input
-                                            className="w-16 mx-1 text-center rounded-md px-1 border border-solid border-[#cccccc] 
-                                                       [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                                            defaultValue={layerOptions.density ?? 1}
-                                            type="number"
-                                            min={1}
-                                            max={3}
-                                            onBlur={(e) =>
+                                        <SimpleSelect
+                                            className="rounded-md mx-1 w-[5rem]"
+                                            menuPlacement={"top"}
+                                            isSearchable={false}
+                                            value={{
+                                                value: layerOptions?.density ?? "",
+                                                label: layerOptions?.density?? "",
+                                            }}
+                                            onChange={(e: any) =>
                                                 setLayerOptions({
                                                     ...layerOptions,
-                                                    density:
-                                                        e.currentTarget
-                                                            .valueAsNumber,
+                                                    density: parseInt(e.value),
                                                 })
                                             }
-                                            onKeyDown={(e) => {
-                                                if (e.key === 'Enter') {
-                                                    setLayerOptions({
-                                                        ...layerOptions,
-                                                        density:
-                                                            e.currentTarget
-                                                                .valueAsNumber,
-                                                    });
-                                                }
-                                            }}
+                                            options={ARROW_DENSITY_OPTIONS}
                                         />
                                     </div>
                                 }