Improve style selection

public/index.html

@@ -96,6 +96,9 @@
             width: 100%;
             padding: 0 0.5rem;
         }
+        details.custom-control > .button-container button.active {
+            pointer-events: none;
+        }
         .maplibregl-ctrl button {
             color: black;
             font-size: 0.8rem;
@@ -292,28 +295,36 @@
 
     map.once("style.load", async () => {
         const data = await dataP
-
+        // remove empty keys and sort colormaps alphabetically
-        let curDate, curVariant, curColormap
+        for (const date in data) {
+            for (const variant in data[date]) {
+                if (data[date][variant].length === 0)
+                    delete data[date][variant]
+                else
+                    data[date][variant] = data[date][variant].sort()
+            }
+            if (Object.keys(data[date]).length === 0)
+                delete data[date]
+        }
         const dates = Object.keys(data).sort()
-        curDate = dates.find(date => {
+        if (dates.length === 0) {
-            const variantEntries = Object.entries(data[date])
-            if (variantEntries.length === 0) return false
-            const variantEntry = variantEntries.find(([variant, colormaps]) => variant === defaultVariant && colormaps.length > 0) ??
-                variantEntries.sort(([a], [b]) => a.localeCompare(b)).find(([_, colormaps]) => colormaps.length > 0)
-            if (!variantEntry) return false
-            const [variant, colormaps] = variantEntry
-            curVariant = variant
-            curColormap = colormaps.find(colormap => colormap === defaultColormap) ?? colormaps.sort()[0]
-            return true
-        })
-        if (!curDate) {
             console.error("no data found")
             return
         }
 
+        let curDate, curVariant, curColormap
+        const resetDate = () => curDate = dates[dates.length - 1]
+        const resetVariant = () => curVariant = defaultVariant in data[curDate] ? defaultVariant : Object.keys(data[curDate]).sort()[0]
+        const resetColormap = () => curColormap = data[curDate][curVariant].includes(defaultColormap) ? defaultColormap : data[curDate][curVariant][0]
+        resetDate()
+        resetVariant()
+        resetColormap()
+
+        const getTileUrl = () => `${tilesDir}/${curDate}/${curVariant}/${curColormap}/{z}/{y}/{x}.png`
+
         map.addSource(tilesId, {
             type: "raster",
-            tiles: [`${tilesDir}/${curDate}/${curVariant}/${curColormap}/{z}/{y}/{x}.png`],
+            tiles: [getTileUrl()],
             tileSize,
             minzoom: 0,
             maxzoom: 8,
@@ -388,17 +399,7 @@
             source: subnetsId,
         })
 
-        const setStyle = (date, variant, colormap) => {
+        const updateTileUrl = () => map.getSource(tilesId).setTiles([getTileUrl()])
-            if (date === curDate && variant === curVariant && colormap === curColormap || !data[date]?.[variant]?.includes(colormap))
-                return false
-            const source = map.getSource(tilesId)
-            if (!source) return false
-            source.setTiles([`${tilesDir}/${date}/${variant}/${colormap}/{z}/{y}/{x}.png`])
-            curDate = date
-            curVariant = variant
-            curColormap = colormap
-            return true
-        }
 
         const addControl = (elem, side) => map.addControl({
             onAdd: () => elem,
@@ -433,11 +434,13 @@
             return { date, button }
         })
         dateButtons.forEach(({ date, button }) => button.addEventListener("click", () => {
-            if (setStyle(date, curVariant, curColormap)) {
+            curDate = date
+            if (!(curVariant in data[curDate])) resetVariant()
+            if (!data[curDate][curVariant].includes(curColormap)) resetColormap()
+            updateTileUrl()
             dateButtons.forEach(({ button }) => button.className = "")
             button.className = "active"
             renderControls()
-            }
         }))
         dateControl.setButtons(dateButtons)
 
@@ -450,11 +453,14 @@
                 return { variant, button }
             })
             variantButtons.forEach(({ variant, button }) => button.addEventListener("click", () => {
-                if (setStyle(curDate, variant, curColormap)) renderControls()
+                curVariant = variant
+                if (!data[curDate][curVariant].includes(curColormap)) resetColormap()
+                updateTileUrl()
+                renderControls()
             }))
             variantControl.setButtons(variantButtons)
     
-            const colormaps = data[curDate][curVariant].sort()
+            const colormaps = data[curDate][curVariant]
             const colormapButtons = colormaps.map(colormap => {
                 const button = document.createElement("button")
                 button.textContent = colormap
@@ -462,10 +468,10 @@
                 return { colormap, button }
             })
             colormapButtons.forEach(({ colormap, button }) => button.addEventListener("click", () => {
-                if (setStyle(curDate, curVariant, colormap)) {
+                curColormap = colormap
+                updateTileUrl()
                 colormapButtons.forEach(({ button }) => button.className = "")
                 button.className = "active"
-                }
             }))
             colormapControl.setButtons(colormapButtons)
         }