From 55d1c833a2707b7d59c689e6bdac2fdeee2d56b6 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:30:56 -0300
Subject: [PATCH 1/8] chore: update package dependencies and remove unused
 packages

- removed @mui/x-data-grid and recoil from dependencies
- added package-lock.json for dependency management
---
 dashboard/package-lock.json | 268 +-----------------------------------
 dashboard/package.json      |   4 +-
 package-lock.json           |   6 +
 3 files changed, 8 insertions(+), 270 deletions(-)
 create mode 100644 package-lock.json

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 708526a..4abd71d 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -12,11 +12,9 @@
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^6.0.0",
         "@mui/material": "^6.0.0",
-        "@mui/x-data-grid": "^8.11.1",
         "@tanstack/react-query": "^5.56.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "recoil": "^0.7.7"
+        "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@eslint/compat": "^1.3.2",
@@ -1439,229 +1437,6 @@
         }
       }
     },
-    "node_modules/@mui/x-data-grid": {
-      "version": "8.11.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.11.1.tgz",
-      "integrity": "sha512-+DUdiQC07BD4PrxvDeP31toTUb+BNF2jSJuhXsUdmg8mEC2F9m2A7VSXbeZVYaz+IOs/MPeM03BpLCN637owRg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.3.1",
-        "@mui/x-internals": "8.11.1",
-        "@mui/x-virtualizer": "0.1.5",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "use-sync-external-store": "^1.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-data-grid/node_modules/@mui/types": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.6.tgz",
-      "integrity": "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-data-grid/node_modules/@mui/utils": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.2.tgz",
-      "integrity": "sha512-4DMWQGenOdLnM3y/SdFQFwKsCLM+mqxzvoWp9+x2XdEzXapkznauHLiXtSohHs/mc0+5/9UACt1GdugCX2te5g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3",
-        "@mui/types": "^7.4.6",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.1.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-internals": {
-      "version": "8.11.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.11.1.tgz",
-      "integrity": "sha512-/l0VpgdgYhC7DzqdWaQcuv3wX7cr+o3DBnoKa/t/Vze3y/Wh2VeNSJY/TsW2dIVkFAA9dsjUEMjclT7ScZTDqA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.3.1",
-        "reselect": "^5.1.1",
-        "use-sync-external-store": "^1.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@mui/x-internals/node_modules/@mui/types": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.6.tgz",
-      "integrity": "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-internals/node_modules/@mui/utils": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.2.tgz",
-      "integrity": "sha512-4DMWQGenOdLnM3y/SdFQFwKsCLM+mqxzvoWp9+x2XdEzXapkznauHLiXtSohHs/mc0+5/9UACt1GdugCX2te5g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3",
-        "@mui/types": "^7.4.6",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.1.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-virtualizer": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-0.1.5.tgz",
-      "integrity": "sha512-Dph10sn5DztOTORk+PTxiVONKfDQOtLRoQXpln2PxjP5DWiYeUkLU8fJRQGth5U7UhYf3AFm29j5K64oN4pVFw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.3.1",
-        "@mui/x-internals": "8.11.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@mui/x-virtualizer/node_modules/@mui/types": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.6.tgz",
-      "integrity": "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-virtualizer/node_modules/@mui/utils": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.2.tgz",
-      "integrity": "sha512-4DMWQGenOdLnM3y/SdFQFwKsCLM+mqxzvoWp9+x2XdEzXapkznauHLiXtSohHs/mc0+5/9UACt1GdugCX2te5g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.3",
-        "@mui/types": "^7.4.6",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.1.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3959,12 +3734,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/hamt_plus": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
-      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==",
-      "license": "MIT"
-    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -5216,26 +4985,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/recoil": {
-      "version": "0.7.7",
-      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
-      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "hamt_plus": "1.0.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5280,12 +5029,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -6053,15 +5796,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/vite": {
       "version": "5.4.19",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index ec79157..a6d14ea 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -14,11 +14,9 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
-    "@mui/x-data-grid": "^8.11.1",
     "@tanstack/react-query": "^5.56.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recoil": "^0.7.7"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..221d8d1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "slcomp",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 5998107d92996bac2d5503cba35fff1a3e353fb1 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:31:15 -0300
Subject: [PATCH 2/8] chore: update content security policy and clean
 dependencies

- refine content security policy for improved security
- remove unused dependencies from Vite configuration
---
 dashboard/index.html     | 2 +-
 dashboard/vite.config.ts | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index 1e556f6..59ddf76 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="LaStBeRu Explorer - Interactive dashboard for astronomical data exploration" />
     <meta name="author" content="CosmoObs" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob: https: http:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' https: http: ws: wss:; worker-src 'self' blob:; object-src 'none';" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' https:; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';" />
     <title>The LaStBeRu Explorer</title>
     <link rel="icon" type="image/png" href="telescope.png" />
     <style>
diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
index c66c023..63586eb 100644
--- a/dashboard/vite.config.ts
+++ b/dashboard/vite.config.ts
@@ -26,9 +26,7 @@ export default defineConfig({
           'react-vendor': ['react', 'react-dom'],
           'mui-core': ['@mui/material', '@mui/system', '@emotion/react', '@emotion/styled'],
           'mui-icons': ['@mui/icons-material'],
-          'mui-datagrid': ['@mui/x-data-grid'],
-          'query-vendor': ['@tanstack/react-query'],
-          'utils': ['recoil']
+          'query-vendor': ['@tanstack/react-query']
         }
       }
     }
@@ -36,10 +34,9 @@ export default defineConfig({
   optimizeDeps: {
     include: [
       'react',
-      'react-dom', 
+      'react-dom',
       '@mui/material',
       '@mui/icons-material',
-      '@mui/x-data-grid',
       '@tanstack/react-query'
     ]
   },

From 0589d233fb061ae5e16fcfb692cece7954313e08 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:31:41 -0300
Subject: [PATCH 3/8] chore: remove unused components and utility files

- deleted Gallery and PerformanceMonitor components to streamline the codebase
- removed unused columnWidth utility file
---
 dashboard/src/components/Gallery.tsx          | 149 ------------------
 .../src/components/PerformanceMonitor.tsx     | 103 ------------
 dashboard/src/utils/columnWidth.ts            |   0
 3 files changed, 252 deletions(-)
 delete mode 100644 dashboard/src/components/Gallery.tsx
 delete mode 100644 dashboard/src/components/PerformanceMonitor.tsx
 delete mode 100644 dashboard/src/utils/columnWidth.ts

diff --git a/dashboard/src/components/Gallery.tsx b/dashboard/src/components/Gallery.tsx
deleted file mode 100644
index cc564ee..0000000
--- a/dashboard/src/components/Gallery.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { Box, Chip, Dialog, DialogContent, DialogTitle, Grid, IconButton, LinearProgress, Stack, Tooltip, Typography } from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import CloseIcon from '@mui/icons-material/Close';
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import type { CutoutRecord } from '../types';
-import { getCutoutObject, revokeBlobUrl } from '../api';
-
-interface GalleryProps {
-  cutouts: CutoutRecord[];
-}
-
-interface ImgEntry {
-  key: string;
-  survey: string;
-  band: string;
-  file_path: string;
-  url: string | null;
-}
-
-export const Gallery: React.FC<GalleryProps> = ({ cutouts }) => {
-  const ordered = useMemo(() => [...cutouts].sort((a,b)=> a.survey.localeCompare(b.survey) || a.band.localeCompare(b.band)), [cutouts]);
-  const surveys = useMemo(()=> Array.from(new Set(ordered.map(c=> c.survey))).sort(), [ordered]);
-  const [activeSurveyFilter, setActiveSurveyFilter] = useState<string | 'ALL'>('ALL');
-  const [images, setImages] = useState<ImgEntry[]>([]);
-  const [loadedCount, setLoadedCount] = useState(0);
-  const [openIdx, setOpenIdx] = useState<number | null>(null);
-
-  const filtered = useMemo(()=> activeSurveyFilter === 'ALL' ? ordered : ordered.filter(c=> c.survey === activeSurveyFilter), [ordered, activeSurveyFilter]);
-
-  useEffect(()=>{
-    let cancelled = false;
-    setImages([]);
-    setLoadedCount(0);
-    if(filtered.length === 0) return;
-    
-    // Clean up previous blob URLs
-    images.forEach(img => {
-      if (img.url) {
-        revokeBlobUrl(img.url);
-      }
-    });
-    
-    (async () => {
-      const entries: ImgEntry[] = [];
-      for(const c of filtered){
-        try {
-          const url = await getCutoutObject(c.file_path);
-          if(cancelled) return;
-          entries.push({ key: c.file_path, survey: c.survey, band: c.band, file_path: c.file_path, url });
-        } catch {
-          if(cancelled) break;
-          entries.push({ key: c.file_path, survey: c.survey, band: c.band, file_path: c.file_path, url: null });
-        }
-        if(cancelled) break;
-        setLoadedCount(v=> v+1);
-        setImages(e=> [...e, ...entries.filter(ne=> !e.find(prev => prev.key === ne.key))]);
-      }
-    })();
-    return () => { 
-      cancelled = true;
-      // Clean up blob URLs when component unmounts
-      images.forEach(img => {
-        if (img.url) {
-          revokeBlobUrl(img.url);
-        }
-      });
-    };
-  }, [filtered]);
-
-  const progress = filtered.length === 0 ? 0 : Math.min(100, Math.round( (loadedCount / filtered.length) * 100));
-
-  const openModal = (idx: number) => setOpenIdx(idx);
-  const closeModal = () => setOpenIdx(null);
-  const next = useCallback(()=> setOpenIdx(i => (i === null ? i : (i + 1) % images.length)), [images.length]);
-  const prev = useCallback(()=> setOpenIdx(i => (i === null ? i : (i - 1 + images.length) % images.length)), [images.length]);
-
-  useEffect(()=>{
-    if(openIdx === null) return;
-    const handler = (e: KeyboardEvent) => {
-      if(e.key === 'Escape') closeModal();
-      if(e.key === 'ArrowRight') next();
-      if(e.key === 'ArrowLeft') prev();
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [openIdx, next, prev]);
-
-  const current = openIdx !== null ? images[openIdx] : null;
-
-  return (
-    <Box>
-      <Stack direction="row" spacing={1} flexWrap="wrap" mb={2}>
-        <Chip label="ALL" color={activeSurveyFilter==='ALL' ? 'primary':'default'} onClick={()=> setActiveSurveyFilter('ALL')} size="small" />
-        {surveys.map(s => <Chip key={s} label={s} color={activeSurveyFilter===s?'primary':'default'} onClick={()=> setActiveSurveyFilter(s)} size="small" />)}
-      </Stack>
-      {filtered.length > 0 && progress < 100 && (
-        <Box mb={2}>
-          <Typography variant="caption" color="text.secondary">Loading images {loadedCount}/{filtered.length}</Typography>
-          <LinearProgress variant="determinate" value={progress} sx={{ mt:0.5 }} />
-        </Box>
-      )}
-      {filtered.length === 0 && <Typography variant="body2" color="text.secondary">No cutouts found.</Typography>}
-      <Grid container spacing={2}>
-        {images.map((img, idx) => (
-          <Grid item key={img.key} xs={6} sm={4} md={3} lg={2} onClick={()=> openModal(idx)} style={{ cursor: img.url ? 'pointer':'default' }}>
-            <Box sx={{ position:'relative', border:'1px solid rgba(90,170,200,0.3)', borderRadius:2, overflow:'hidden', background:'linear-gradient(145deg,#18313b,#0d1c23)', p:1, minHeight:140, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
-              <Box sx={{ flexGrow:1, display:'flex', alignItems:'center', justifyContent:'center' }}>
-                {img.url ? (<img src={img.url} style={{ maxWidth:'100%', maxHeight:120, objectFit:'contain' }} />) : (<Typography variant="caption" color="text.secondary">No image</Typography>)}
-              </Box>
-              <Typography variant="caption" sx={{ mt:0.5, fontSize:'0.65rem', letterSpacing:0.3 }} color="primary.light">{img.survey} – {img.band}</Typography>
-            </Box>
-          </Grid>
-        ))}
-      </Grid>
-
-      <Dialog open={openIdx !== null && !!current} onClose={closeModal} maxWidth="lg" fullWidth>
-        {current && (
-          <>
-            <DialogTitle sx={{ display:'flex', alignItems:'center', pr:6 }}>
-              <Typography variant="subtitle1" sx={{ flexGrow:1 }}>{current.survey} – {current.band}</Typography>
-              <Tooltip title="Download raw">
-                <span>
-                  {current.url && <IconButton size="small" component="a" href={current.url} download={current.file_path}><DownloadIcon fontSize="small" /></IconButton>}
-                </span>
-              </Tooltip>
-              <IconButton onClick={closeModal} size="small" sx={{ ml:1 }}><CloseIcon fontSize="small" /></IconButton>
-            </DialogTitle>
-            <DialogContent sx={{ display:'flex', flexDirection:'column', alignItems:'center', bgcolor:'#0b1419' }}>
-              <Box sx={{ display:'flex', alignItems:'center', width:'100%', justifyContent:'space-between', mb:2 }}>
-                <IconButton onClick={prev} disabled={images.length<=1}><ArrowBackIosNewIcon fontSize="small" /></IconButton>
-                <Typography variant="caption" color="text.secondary">{(openIdx||0)+1}/{images.length}</Typography>
-                <IconButton onClick={next} disabled={images.length<=1}><ArrowForwardIosIcon fontSize="small" /></IconButton>
-              </Box>
-              {current.url ? (
-                <Box sx={{ maxWidth:'100%', maxHeight:'70vh' }}>
-                  <img src={current.url} style={{ maxWidth:'100%', maxHeight:'70vh', objectFit:'contain', borderRadius:4 }} />
-                </Box>
-              ) : (
-                <Typography variant="body2" color="text.secondary">Image not available.</Typography>
-              )}
-            </DialogContent>
-          </>
-        )}
-      </Dialog>
-    </Box>
-  );
-};
diff --git a/dashboard/src/components/PerformanceMonitor.tsx b/dashboard/src/components/PerformanceMonitor.tsx
deleted file mode 100644
index 03433ef..0000000
--- a/dashboard/src/components/PerformanceMonitor.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useEffect, useState, memo } from 'react';
-import { Typography, Box, Collapse } from '@mui/material';
-
-interface PerformanceStats {
-  renderTime: number;
-  dataLoadTime: number;
-  filteredCount: number;
-  totalCount: number;
-  memoryUsage?: number;
-}
-
-interface Props {
-  stats: PerformanceStats;
-  show?: boolean;
-}
-
-export const PerformanceMonitor: React.FC<Props> = memo(({ stats, show = false }) => {
-  const [expanded, setExpanded] = useState(false);
-
-  // Show performance stats in development mode
-  const isDev = import.meta.env.DEV;
-
-  useEffect(() => {
-    // Log performance stats to console in dev mode
-    if (isDev) {
-      console.log('Performance Stats:', stats);
-    }
-  }, [stats, isDev]);
-
-  if (!isDev && !show) return null;
-
-  return (
-    <Box sx={{ position: 'fixed', bottom: 8, left: 8, zIndex: 1000 }}>
-      <Box
-        sx={{
-          background: 'rgba(0,0,0,0.8)',
-          color: 'white',
-          p: 1,
-          borderRadius: 1,
-          fontSize: '0.75rem',
-          cursor: 'pointer',
-          minWidth: 120
-        }}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
-          Performance {expanded ? '▼' : '▶'}
-        </Typography>
-        <Collapse in={expanded}>
-          <Box sx={{ mt: 1, fontSize: '0.7rem', lineHeight: 1.2 }}>
-            <div>Render: {stats.renderTime.toFixed(1)}ms</div>
-            <div>Data Load: {stats.dataLoadTime.toFixed(1)}ms</div>
-            <div>Filtered: {stats.filteredCount.toLocaleString()}</div>
-            <div>Total: {stats.totalCount.toLocaleString()}</div>
-            {stats.memoryUsage && (
-              <div>Memory: {(stats.memoryUsage / 1024 / 1024).toFixed(1)}MB</div>
-            )}
-          </Box>
-        </Collapse>
-      </Box>
-    </Box>
-  );
-});
-
-PerformanceMonitor.displayName = 'PerformanceMonitor';
-
-// Hook to measure performance
-export const usePerformanceStats = () => {
-  const [stats, setStats] = useState<PerformanceStats>({
-    renderTime: 0,
-    dataLoadTime: 0,
-    filteredCount: 0,
-    totalCount: 0
-  });
-
-  const updateStats = (newStats: Partial<PerformanceStats>) => {
-    setStats(prev => ({ ...prev, ...newStats }));
-  };
-
-  const measureRenderTime = (callback: () => void) => {
-    const start = performance.now();
-    callback();
-    const end = performance.now();
-    updateStats({ renderTime: end - start });
-  };
-
-  const getMemoryUsage = () => {
-    if ('memory' in performance) {
-      return (performance as any).memory.usedJSHeapSize;
-    }
-    return undefined;
-  };
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      updateStats({ memoryUsage: getMemoryUsage() });
-    }, 2000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return { stats, updateStats, measureRenderTime };
-};
diff --git a/dashboard/src/utils/columnWidth.ts b/dashboard/src/utils/columnWidth.ts
deleted file mode 100644
index e69de29..0000000

From c8392ea3ea64f5c90aff7fa2c147c13930375da1 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:32:03 -0300
Subject: [PATCH 4/8] ci: update build step environment variables

- set BASE_PATH and VITE_MINIO_ENDPOINT in build step for better configuration
---
 .github/workflows/deploy.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index f83c3d9..be2f1cd 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -56,9 +56,11 @@ jobs:
         uses: actions/configure-pages@v4
         
       - name: Build
+        env:
+          BASE_PATH: /slcomp/
+          VITE_MINIO_ENDPOINT: ${{ secrets.VITE_MINIO_ENDPOINT }}
         run: |
           cd dashboard
-          export BASE_PATH=/slcomp/
           npm run build
           
       - name: Upload artifact

From 7ce215228eaceb4ea285b0c98a0a33de6de107cf Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:33:14 -0300
Subject: [PATCH 5/8] perf: drop theme backdrop-filter, extend VirtualizedList,
 tidy sky worker

---
 dashboard/src/App.tsx                        | 351 +++++----
 dashboard/src/api.ts                         | 188 ++---
 dashboard/src/components/CutoutGrid.tsx      | 100 +--
 dashboard/src/components/DataTables.tsx      | 160 ++--
 dashboard/src/components/FiltersDrawer.tsx   |  40 +-
 dashboard/src/components/ObjectsTable.tsx    | 183 ++---
 dashboard/src/components/SkyMap.tsx          | 749 ++++++++-----------
 dashboard/src/components/VirtualizedList.tsx |  70 +-
 dashboard/src/theme.ts                       |  77 +-
 dashboard/src/workers/skyProjectionWorker.ts |  40 +-
 10 files changed, 831 insertions(+), 1127 deletions(-)

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 7ce2889..7216870 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -4,13 +4,13 @@ import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import { useQuery } from '@tanstack/react-query';
 import { loadDatabase, loadConsolidated, loadDictionary, loadCutouts } from './api';
-const DataTables = lazy(()=> import('./components/DataTables').then(m => ({ default: m.DataTables })));
-const CutoutGrid = lazy(()=> import('./components/CutoutGrid').then(m => ({ default: m.CutoutGrid })));
+const DataTables = lazy(() => import('./components/DataTables').then(m => ({ default: m.DataTables })));
+const CutoutGrid = lazy(() => import('./components/CutoutGrid').then(m => ({ default: m.CutoutGrid })));
 import { FiltersDrawer, FiltersState } from './components/FiltersDrawer';
 import { ObjectsTable } from './components/ObjectsTable';
 import { SkyMap } from './components/SkyMap';
 import { useDebounce } from './hooks/useDebounce';
-import type { CutoutRecord } from './types';
+import type { CutoutRecord, DataRecord, ConsolidatedRecord } from './types';
 
 interface SkyMapObject {
   JNAME: string;
@@ -21,6 +21,28 @@ interface SkyMapObject {
   [key: string]: unknown;
 }
 
+const NUMERIC_FIELDS = [
+  { key: 'RA', label: 'RA' },
+  { key: 'DEC', label: 'DEC' },
+  { key: 'z_L', label: 'z_L' },
+  { key: 'z_S', label: 'z_S' }
+] as const;
+
+const EMPTY_FILTERS: FiltersState = { jnameSearch: '', references: [], numeric: {} };
+
+const isFiltersEmpty = (f: FiltersState) =>
+  !f.jnameSearch && f.references.length === 0 &&
+  Object.values(f.numeric).every(v => v == null);
+
+const toNum = (x: unknown): number | null => {
+  if (typeof x === 'number') return isNaN(x) ? null : x;
+  if (typeof x === 'string') {
+    const v = parseFloat(x);
+    return isNaN(v) ? null : v;
+  }
+  return null;
+};
+
 function tabProps(index: number) {
   return { id: `tab-${index}`, 'aria-controls': `tabpanel-${index}` };
 }
@@ -31,179 +53,148 @@ const App: React.FC = () => {
   const { data: dictionary = {} as Record<string, unknown>, isLoading: dictLoading, error: dictError } = useQuery({ queryKey: ['dict'], queryFn: loadDictionary });
   const { data: cutouts = [], isLoading: cutoutsLoading, error: cutoutsError } = useQuery({ queryKey: ['cutouts'], queryFn: loadCutouts });
 
-  const references = useMemo(()=> Object.keys(dictionary), [dictionary]);
+  const references = useMemo(() => Object.keys(dictionary), [dictionary]);
   const [jname, setJName] = useState<string>('');
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const initialFilters: FiltersState = useMemo(() => ({ 
-    jnameSearch: '', 
-    references: [], 
-    numeric: {} 
-  }), []);
-  const [filters, setFilters] = useState<FiltersState>(initialFilters);
+  const [filters, setFilters] = useState<FiltersState>(EMPTY_FILTERS);
   const [tab, setTab] = useState(0);
-  
-  // Derive numeric domains for selected fields (memoized with cache)
-  const numericFields = useMemo(() => [
-    { key: 'RA', label: 'RA' },
-    { key: 'DEC', label: 'DEC' },
-    { key: 'z_L', label: 'z_L' },
-    { key: 'z_S', label: 'z_S' }
-  ], []);
 
-  const domain = useMemo(()=>{
-    if (!database.length) return {};
-    
-    const acc: Record<string,{min:number;max:number}> = {};
-    numericFields.forEach(f=>{
-      const vals: number[] = [];
-      // Sample every 10th record for large datasets to speed up domain calculation
-      const step = database.length > 10000 ? 10 : 1;
-      for(let i = 0; i < database.length; i += step){
-        const r = database[i];
-        if(!r) continue;
-        let v: unknown = r[f.key];
-        if(typeof v === 'string'){ const parsed = parseFloat(v); if(!isNaN(parsed)) v = parsed; }
-        if(typeof v === 'number' && !isNaN(v)) vals.push(v);
+  // Single pass: build unique baseObjects + per-field [min,max] domain.
+  // Loop-based min/max avoids stack overflow on Math.min(...) for large arrays.
+  const { baseObjects, domain } = useMemo(() => {
+    const seen = new Map<string, SkyMapObject>();
+    const dom: Record<string, { min: number; max: number }> = {};
+    const initDom = (k: string, v: number) => {
+      const d = dom[k];
+      if (!d) dom[k] = { min: v, max: v };
+      else { if (v < d.min) d.min = v; if (v > d.max) d.max = v; }
+    };
+
+    for (const r of database) {
+      if (!r?.JNAME) continue;
+      const RA = toNum(r.RA);
+      const DEC = toNum(r.DEC);
+      const z_L = toNum(r.z_L);
+      const z_S = toNum(r.z_S);
+      if (RA != null) initDom('RA', RA);
+      if (DEC != null) initDom('DEC', DEC);
+      if (z_L != null) initDom('z_L', z_L);
+      if (z_S != null) initDom('z_S', z_S);
+
+      const cur = seen.get(r.JNAME);
+      if (!cur) {
+        seen.set(r.JNAME, { JNAME: r.JNAME, RA, DEC, z_L, z_S });
+      } else {
+        if (cur.RA == null) cur.RA = RA;
+        if (cur.DEC == null) cur.DEC = DEC;
+        if (cur.z_L == null) cur.z_L = z_L;
+        if (cur.z_S == null) cur.z_S = z_S;
       }
-      if(vals.length){ acc[f.key] = { min: Math.min(...vals), max: Math.max(...vals) }; }
-    });
-    return acc;
-  }, [database, numericFields]);
+    }
+    return { baseObjects: Array.from(seen.values()), domain: dom };
+  }, [database]);
 
-  // Precompute mapping: JNAME -> set of references (for fast filtering) - optimized
-  const jnameToRefs = useMemo(()=> {
-    if (!references.length) return {};
-    
-    const map: Record<string, Set<string>> = {};
-    for(const ref of references){
+  // JNAME -> set of references (built once per dictionary).
+  const jnameToRefs = useMemo(() => {
+    const map = new Map<string, Set<string>>();
+    for (const ref of references) {
       const entry = dictionary[ref] as { JNAME?: string[] };
-      if(!entry || !Array.isArray(entry.JNAME)) continue;
-      for(const jn of entry.JNAME){
-        if (!map[jn]) map[jn] = new Set();
-        map[jn].add(ref);
+      if (!entry || !Array.isArray(entry.JNAME)) continue;
+      for (const jn of entry.JNAME) {
+        let s = map.get(jn);
+        if (!s) { s = new Set(); map.set(jn, s); }
+        s.add(ref);
       }
     }
     return map;
   }, [references, dictionary]);
 
-  // Unique base objects (collapse duplicates by JNAME) - optimized with early returns
-  const baseObjects = useMemo(()=> {
-    if (!database.length) return [];
-    
-    const toNum = (x: unknown): number | null => {
-      if(typeof x === 'number' && !isNaN(x)) return x;
-      if(typeof x === 'string'){
-        const v = parseFloat(x.trim());
-        return isNaN(v) ? null : v;
-      }
-      return null;
-    };
-    const seen: Record<string, SkyMapObject> = {};
-    
-    for(const r of database){
-      if(!r?.JNAME) continue;
-      
-      if(!seen[r.JNAME]){
-        const RA = toNum(r.RA);
-        const DEC = toNum(r.DEC);
-        const z_L = toNum(r.z_L);
-        const z_S = toNum(r.z_S);
-        seen[r.JNAME] = { JNAME: r.JNAME, RA, DEC, z_L, z_S };
-      } else {
-        // Only update null values to avoid unnecessary work
-        const tgt = seen[r.JNAME];
-        if(tgt.RA == null) tgt.RA = toNum(r.RA);
-        if(tgt.DEC == null) tgt.DEC = toNum(r.DEC);
-        if(tgt.z_L == null) tgt.z_L = toNum(r.z_L);
-        if(tgt.z_S == null) tgt.z_S = toNum(r.z_S);
-      }
+  // Indexes for O(1) lookup of per-JNAME slices.
+  const dbByJname = useMemo(() => {
+    const m = new Map<string, DataRecord[]>();
+    for (const r of database) {
+      if (!r?.JNAME) continue;
+      const arr = m.get(r.JNAME);
+      if (arr) arr.push(r); else m.set(r.JNAME, [r]);
     }
-    return Object.values(seen);
+    return m;
   }, [database]);
 
-  // Numeric filters keys to iterate quickly
-  const activeNumericKeys = useMemo(()=> Object.entries(filters.numeric).filter(([_,v])=> !!v).map(([k])=> k), [filters.numeric]);
+  const consByJname = useMemo(() => {
+    const m = new Map<string, ConsolidatedRecord[]>();
+    for (const r of consolidated) {
+      if (!r?.JNAME) continue;
+      const arr = m.get(r.JNAME);
+      if (arr) arr.push(r); else m.set(r.JNAME, [r]);
+    }
+    return m;
+  }, [consolidated]);
+
+  const cutoutsByJname = useMemo(() => {
+    const m = new Map<string, CutoutRecord[]>();
+    for (const c of cutouts) {
+      if (!c?.JNAME) continue;
+      const arr = m.get(c.JNAME);
+      if (arr) arr.push(c); else m.set(c.JNAME, [c]);
+    }
+    return m;
+  }, [cutouts]);
+
+  const activeNumericKeys = useMemo(
+    () => Object.entries(filters.numeric).filter(([, v]) => !!v).map(([k]) => k),
+    [filters.numeric]
+  );
 
-  // Debounce search text to avoid excessive filtering
-  const debouncedSearch = useDebounce(filters.jnameSearch, 300);
+  // Single debounce on the search term — drawer no longer pre-debounces.
+  const debouncedSearch = useDebounce(filters.jnameSearch, 250);
 
-  // Optimized filtering with early returns and better algorithms
-  const filteredObjects = useMemo(()=> {
-    if(!baseObjects.length) return [];
-    
+  const filteredObjects = useMemo(() => {
+    if (!baseObjects.length) return [];
     const search = debouncedSearch.trim().toLowerCase();
     const useRefs = filters.references.length > 0;
     const refsSet = useRefs ? new Set(filters.references) : null;
-    const hasNumericFilters = activeNumericKeys.length > 0;
-    
-    return baseObjects.filter((r: SkyMapObject)=> {
-      if(!r?.JNAME) return false;
-      
-      // Text search first (cheapest filter)
-      if(search && !String(r.JNAME).toLowerCase().includes(search)) return false;
-      
-      // Reference filter
-      if(useRefs){
-        const rs = jnameToRefs[String(r.JNAME)];
-        if(!rs) return false;
-        let hasMatchingRef = false;
-        for(const ref of rs){ 
-          if(refsSet!.has(ref)){ 
-            hasMatchingRef = true; 
-            break; 
-          } 
-        }
-        if(!hasMatchingRef) return false;
+    const hasNumeric = activeNumericKeys.length > 0;
+
+    return baseObjects.filter((r) => {
+      if (!r?.JNAME) return false;
+      if (search && !String(r.JNAME).toLowerCase().includes(search)) return false;
+      if (useRefs) {
+        const rs = jnameToRefs.get(String(r.JNAME));
+        if (!rs) return false;
+        let ok = false;
+        for (const ref of rs) { if (refsSet!.has(ref)) { ok = true; break; } }
+        if (!ok) return false;
       }
-      
-      // Numeric filters (most expensive, do last)
-      if(hasNumericFilters){
-        for(const k of activeNumericKeys){
+      if (hasNumeric) {
+        for (const k of activeNumericKeys) {
           const range = filters.numeric[k]!;
           const val = r[k] as number;
-          if(typeof val !== 'number' || val < range[0] || val > range[1]) return false;
+          if (typeof val !== 'number' || val < range[0] || val > range[1]) return false;
         }
       }
-      
       return true;
     });
   }, [baseObjects, debouncedSearch, filters.references, filters.numeric, jnameToRefs, activeNumericKeys]);
 
-  // Selected object dependent data
-  const filteredDb = useMemo(()=> database.filter(r=> r.JNAME === jname), [database, jname]);
-  const filteredCons = useMemo(()=> consolidated.filter(r=> r.JNAME === jname), [consolidated, jname]);
-  const filteredCutouts = useMemo(()=> cutouts.filter(c=> c.JNAME === jname), [cutouts, jname]);
-  const surveys = useMemo(()=> Array.from(new Set(filteredCutouts.map(c=> String(c.survey)))).sort(), [filteredCutouts]);
-
-  const resetFilters = useCallback(() => {
-    setFilters(initialFilters);
-  }, [initialFilters]);
-
-  const handleDrawerToggle = useCallback(() => {
-    setDrawerOpen(prev => !prev);
-  }, []);
-
-  const handleJNameSelect = useCallback((jname: string) => {
-    setJName(jname);
-  }, []);
-
-  const handleJNameClear = useCallback(() => {
-    setJName('');
-  }, []);
+  const filteredDb = useMemo(() => (jname ? dbByJname.get(jname) ?? [] : []), [dbByJname, jname]);
+  const filteredCons = useMemo(() => (jname ? consByJname.get(jname) ?? [] : []), [consByJname, jname]);
+  const filteredCutouts = useMemo(() => (jname ? cutoutsByJname.get(jname) ?? [] : []), [cutoutsByJname, jname]);
+  const surveys = useMemo(() => Array.from(new Set(filteredCutouts.map(c => String(c.survey)))).sort(), [filteredCutouts]);
 
-  const handleTabChange = useCallback((event: unknown, value: number) => {
-    setTab(value);
-  }, []);
+  const resetFilters = useCallback(() => setFilters(EMPTY_FILTERS), []);
+  const handleDrawerToggle = useCallback(() => setDrawerOpen(p => !p), []);
+  const handleJNameSelect = useCallback((j: string) => setJName(j), []);
+  const handleJNameClear = useCallback(() => setJName(''), []);
+  const handleTabChange = useCallback((_: unknown, value: number) => setTab(value), []);
 
-  const allReferences = useMemo(()=> references.sort(), [references]);
+  const allReferences = useMemo(() => [...references].sort(), [references]);
 
   const anyLoading = dbLoading || consLoading || dictLoading || cutoutsLoading;
   const anyError = dbError || consError || dictError || cutoutsError;
   const theme = useTheme();
   const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
-  const panelHeight = isMdUp ? 360 : 300; // responsive height for map/table
+  const panelHeight = isMdUp ? 360 : 300;
 
-  // Show loading state early to improve perceived performance
   if (anyLoading && !database.length) {
     return (
       <Box sx={{ flexGrow: 1 }}>
@@ -213,8 +204,8 @@ const App: React.FC = () => {
           </Toolbar>
         </AppBar>
         <Container maxWidth="xl" sx={{ py: 3 }}>
-          <Paper sx={{ p:6, textAlign:'center', mb:3, background:'linear-gradient(135deg,#102028,#0c161c)' }}>
-            <CircularProgress size={40} sx={{ mb:2 }} />
+          <Paper sx={{ p: 6, textAlign: 'center', mb: 3 }}>
+            <CircularProgress size={40} sx={{ mb: 2 }} />
             <Typography variant="body2" color="text.secondary">Loading astronomical data...</Typography>
             <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
               This may take a moment for large datasets
@@ -229,9 +220,8 @@ const App: React.FC = () => {
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static" color="transparent" elevation={0}>
         <Toolbar>
-          {/* Logo SLComp à esquerda */}
-          <Box sx={{ display:'flex', alignItems:'center', mr:1 }}>
-            <img src="https://raw.githubusercontent.com/CosmoObs/slcomp/refs/heads/main/.figures/slcomp.png" alt="SLComp Logo" style={{ height:32, width:80, marginRight:8, borderRadius:1, background:'#000000ff' }} />
+          <Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
+            <img src="https://raw.githubusercontent.com/CosmoObs/slcomp/refs/heads/main/.figures/slcomp.png" alt="SLComp Logo" style={{ height: 32, width: 80, marginRight: 8, borderRadius: 1, background: '#000' }} />
             <Typography variant="h6" sx={{ fontWeight: 600, letterSpacing: 0.5 }}>The LaStBeRu Explorer</Typography>
           </Box>
           <Box flexGrow={1} />
@@ -240,11 +230,10 @@ const App: React.FC = () => {
           </Tooltip>
           <Tooltip title="Reset Filters">
             <span>
-              <IconButton color="inherit" onClick={resetFilters} size="small" disabled={filters === initialFilters}><ClearAllIcon /></IconButton>
+              <IconButton color="inherit" onClick={resetFilters} size="small" disabled={isFiltersEmpty(filters)}><ClearAllIcon /></IconButton>
             </span>
           </Tooltip>
-          {/* Botão GitHub à direita */}
-          <Box sx={{ ml:2 }}>
+          <Box sx={{ ml: 2 }}>
             <Tooltip title="slcomp Repository">
               <IconButton
                 color="inherit"
@@ -253,9 +242,9 @@ const App: React.FC = () => {
                 target="_blank"
                 rel="noopener noreferrer"
                 size="small"
-                sx={{ p:0.0 }}
+                sx={{ p: 0 }}
               >
-                <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" style={{ height:28, width:28, borderRadius:'50%' }} />
+                <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" style={{ height: 28, width: 28, borderRadius: '50%' }} />
               </IconButton>
             </Tooltip>
           </Box>
@@ -263,53 +252,51 @@ const App: React.FC = () => {
       </AppBar>
       <Container maxWidth="xl" sx={{ py: 3 }}>
         {anyLoading && (
-          <Paper sx={{ p:6, textAlign:'center', mb:3, background:'linear-gradient(135deg,#102028,#0c161c)' }}>
-            <CircularProgress size={40} sx={{ mb:2 }} />
+          <Paper sx={{ p: 6, textAlign: 'center', mb: 3 }}>
+            <CircularProgress size={40} sx={{ mb: 2 }} />
             <Typography variant="body2" color="text.secondary">Loading data...</Typography>
           </Paper>
         )}
         {anyError && (
-          <Paper sx={{ p:4, mb:3, background:'linear-gradient(135deg,#281010,#1c0c0c)', border:'1px solid #552' }}>
+          <Paper sx={{ p: 4, mb: 3, background: 'linear-gradient(135deg,#281010,#1c0c0c)', border: '1px solid #552' }}>
             <Typography variant="h6" gutterBottom>Error loading data</Typography>
             <Typography variant="body2" color="text.secondary">{String(anyError)}</Typography>
           </Paper>
         )}
-        <Paper sx={{ p: 2, mb: 3, background: 'linear-gradient(135deg,#112029,#0d151b)' }}>
-          <Box display="flex" gap={2} alignItems="stretch" 
-               sx={{ flexDirection:{ xs:'column', md:'row' } }}>
-            <Box 
-              sx={{ 
-                flex: { xs:'1 1 auto', md:'0 0 260px' }, 
-                width:{ xs:'100%', md:260 }, 
-                display:'flex', 
-                flexDirection:'column', 
-                minHeight:0, 
-                height:{ md: panelHeight }
+        <Paper sx={{ p: 2, mb: 3 }}>
+          <Box display="flex" gap={2} alignItems="stretch" sx={{ flexDirection: { xs: 'column', md: 'row' } }}>
+            <Box
+              sx={{
+                flex: { xs: '1 1 auto', md: '0 0 260px' },
+                width: { xs: '100%', md: 260 },
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+                height: { md: panelHeight }
               }}
             >
-              <Box sx={{ flex:1, minHeight:0 }}>
-                <ObjectsTable 
-                  objects={filteredObjects} 
-                  onSelect={handleJNameSelect} 
-                  selected={jname} 
-                  fullHeight={isMdUp} 
-                  height={panelHeight} 
+              <Box sx={{ flex: 1, minHeight: 0 }}>
+                <ObjectsTable
+                  objects={filteredObjects}
+                  onSelect={handleJNameSelect}
+                  selected={jname}
+                  height={panelHeight}
                 />
               </Box>
             </Box>
             <Box flex={1} minWidth={0} sx={{ height: panelHeight }}>
-              <SkyMap 
-                objects={filteredObjects} 
-                selected={jname} 
-                onSelect={handleJNameSelect} 
-                height={panelHeight} 
+              <SkyMap
+                objects={filteredObjects}
+                selected={jname}
+                onSelect={handleJNameSelect}
+                height={panelHeight}
               />
             </Box>
           </Box>
-          {jname && <Box sx={{ mt:1, textAlign:'left' }}><Button size="small" onClick={handleJNameClear}>Clear selection</Button></Box>}
+          {jname && <Box sx={{ mt: 1, textAlign: 'left' }}><Button size="small" onClick={handleJNameClear}>Clear selection</Button></Box>}
         </Paper>
         {jname ? (
-          <Paper sx={{ background: 'linear-gradient(145deg,#14232c,#101a21)', p: 2 }}>
+          <Paper sx={{ p: 2 }}>
             <Tabs value={tab} onChange={handleTabChange} textColor="primary" indicatorColor="primary" variant="scrollable">
               <Tab label="Data" {...tabProps(0)} />
               <Tab label="Cutouts" {...tabProps(1)} />
@@ -327,10 +314,10 @@ const App: React.FC = () => {
                         const bl = String(b.band).toLowerCase();
                         const rank = (x: string) => x === 'lsb' ? 0 : x === 'trilogy' ? 1 : 2;
                         const ra = rank(al); const rb = rank(bl);
-                        if(ra !== rb) return ra - rb;
+                        if (ra !== rb) return ra - rb;
                         return al.localeCompare(bl);
                       };
-                      const cutoutsBySurvey = filteredCutouts.filter(c=> c.survey === s).sort(sortBands);
+                      const cutoutsBySurvey = filteredCutouts.filter(c => c.survey === s).sort(sortBands);
                       return <CutoutGrid key={s} survey={s} cutouts={cutoutsBySurvey} />;
                     })}
                   </Box>
@@ -339,7 +326,7 @@ const App: React.FC = () => {
             </Box>
           </Paper>
         ) : (
-          <Paper sx={{ p:4, textAlign:'center', background: 'linear-gradient(145deg,#14232c,#101a21)' }}>
+          <Paper sx={{ p: 4, textAlign: 'center' }}>
             <Typography variant="h5" gutterBottom>Select an object</Typography>
             <Typography variant="body1" color="text.secondary">Use the panel for filters to refine your search and click on a JNAME in the table.</Typography>
           </Paper>
@@ -347,9 +334,9 @@ const App: React.FC = () => {
       </Container>
       <FiltersDrawer
         open={drawerOpen}
-        onClose={()=> setDrawerOpen(false)}
+        onClose={() => setDrawerOpen(false)}
         allReferences={allReferences}
-        numericFields={numericFields}
+        numericFields={NUMERIC_FIELDS as unknown as { key: string; label: string }[]}
         domain={domain}
         value={filters}
         onChange={setFilters}
diff --git a/dashboard/src/api.ts b/dashboard/src/api.ts
index ef53e89..c3f6db9 100644
--- a/dashboard/src/api.ts
+++ b/dashboard/src/api.ts
@@ -1,189 +1,101 @@
 import type { DataRecord, ConsolidatedRecord, Dictionary, CutoutRecord } from './types';
 
-// NOTE: When deployed on GitHub Pages the app is usually served from /<repo-name>/.
-// Using absolute paths (starting with "/") causes fetches to point at the domain root
-// (e.g. https://<user>.github.io/data/...) which 404s and returns the HTML index page.
-// That HTML then triggers: "SyntaxError: Unexpected token '<'" when res.json() is called.
-// We instead build URLs relative to Vite's injected BASE_URL (import.meta.env.BASE_URL).
-
+// When deployed on GitHub Pages the app is served from /<repo-name>/.
+// We build URLs relative to Vite's injected BASE_URL so static JSON in
+// public/data/ resolves correctly under any subpath.
 const BASE_URL: string = (import.meta as { env?: Record<string, string> }).env?.BASE_URL || '/';
 
 const buildDataUrl = (file: string) => {
-  // Ensure exactly one trailing slash for BASE_URL then append data/<file>
   const base = BASE_URL.endsWith('/') ? BASE_URL : `${BASE_URL}/`;
   return `${base}data/${file}`;
 };
 
-// Add request optimization and caching
-const requestCache = new Map<string, Promise<any>>();
-
 async function fetchJson<T>(file: string): Promise<T> {
   const url = buildDataUrl(file);
-  
-  // Return cached promise if available
-  if (requestCache.has(url)) {
-    return requestCache.get(url);
-  }
-  
-  const fetchPromise = (async () => {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout
-    
-    try {
-      const res = await fetch(url, { 
-        cache: 'force-cache', // Use browser cache when available
-        signal: controller.signal,
-        headers: {
-          'Accept': 'application/json',
-          'Cache-Control': 'public, max-age=3600' // Cache for 1 hour
-        }
-      });
-      
-      clearTimeout(timeoutId);
-      
-      if (!res.ok) {
-        // Surface clearer diagnostics when something goes wrong (like path issues on Pages)
-        const text = await res.text();
-        throw new Error(`Failed to fetch ${url} (HTTP ${res.status}) - First 120 chars: ${text.slice(0, 120)}`);
-      }
-      
-      const data = await res.json();
-      return data;
-    } catch (err) {
-      clearTimeout(timeoutId);
-      
-      if (err instanceof Error && err.name === 'AbortError') {
-        throw new Error(`Request timeout for ${url}`);
-      }
-      
-      // Provide snippet of body to aid debugging of unexpected HTML responses
-      throw new Error(`Failed to load ${url}: ${(err as Error).message}`);
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 30000);
+
+  try {
+    const res = await fetch(url, { signal: controller.signal, headers: { Accept: 'application/json' } });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`Failed to fetch ${url} (HTTP ${res.status}) - First 120 chars: ${text.slice(0, 120)}`);
+    }
+    return await res.json();
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') {
+      throw new Error(`Request timeout for ${url}`);
     }
-  })();
-  
-  // Cache the promise
-  requestCache.set(url, fetchPromise);
-  
-  // Remove from cache after completion (success or failure)
-  fetchPromise.finally(() => {
-    setTimeout(() => requestCache.delete(url), 5000); // Keep cache for 5s
-  });
-  
-  return fetchPromise;
+    throw err;
+  } finally {
+    clearTimeout(timeoutId);
+  }
 }
 
-// Public data loaders (can be swapped for real API later)
 export const loadDatabase = (): Promise<DataRecord[]> => fetchJson<DataRecord[]>('database.json');
 export const loadConsolidated = (): Promise<ConsolidatedRecord[]> => fetchJson<ConsolidatedRecord[]>('consolidated_database.json');
 export const loadDictionary = (): Promise<Dictionary> => fetchJson<Dictionary>('dictionary.json');
 export const loadCutouts = (): Promise<CutoutRecord[]> => fetchJson<CutoutRecord[]>('cutouts.json');
 
-// MinIO direct image retrieval (signed URL pattern) - placeholder using fetch of gateway
-// Direct public path construction (no proxy). Expect objectKey like
-//   Processed_Cutouts/20asec/HSC/J100139....png
-// Base endpoint rules:
-//  - If VITE_MINIO_ENDPOINT includes scheme (http:// or https://) we use it verbatim.
-//  - Else we prepend scheme from VITE_MINIO_SCHEME (default 'https').
-//  - This allows using plain HTTP during local dev / tunnels without mixed content surprises.
-// const RAW_ENDPOINT: string | undefined = (import.meta as { env?: Record<string, string> }).env?.VITE_MINIO_ENDPOINT;
-const RAW_ENDPOINT: string | undefined = "l5s5a0sibv6w.share.zrok.io";
-const ENDPOINT_SCHEME: string = ((import.meta as { env?: Record<string, string> }).env?.VITE_MINIO_SCHEME || 'https').replace(/:$/,'');
+// MinIO direct image retrieval.
+// Endpoint resolution rules:
+//  - VITE_MINIO_ENDPOINT may include a scheme (http:// or https://); if not,
+//    we prepend VITE_MINIO_SCHEME (default 'https').
+//  - In dev, requests go through the Vite proxy in vite.config.ts, which
+//    injects the zrok interstitial-bypass header.
+const env = (import.meta as { env?: Record<string, string> }).env || {};
+const RAW_ENDPOINT: string | undefined = env.VITE_MINIO_ENDPOINT;
+const ENDPOINT_SCHEME: string = (env.VITE_MINIO_SCHEME || 'https').replace(/:$/, '');
+const DEBUG_CUTOUTS = !!env.VITE_DEBUG_CUTOUTS;
+
 export const buildCutoutUrl = (objectKey: string): string => {
-  const cleaned = objectKey.trim().replace(/^\/+/,'');
+  const cleaned = objectKey.trim().replace(/^\/+/, '');
   const path = cleaned.startsWith('Cutouts/') ? cleaned : `Cutouts/${cleaned}`;
 
-  // Em dev, usa proxy local
-  if (import.meta.env && (import.meta as any).env.DEV) {
+  if (env.DEV) {
     const proxied = '/proxy-cutouts/' + path.replace(/^Cutouts\//, '');
-    if((import.meta as { env?: Record<string, string> }).env?.VITE_DEBUG_CUTOUTS) console.debug('[cutout-url-dev-proxy]', { objectKey, path, proxied });
+    if (DEBUG_CUTOUTS) console.debug('[cutout-url-dev-proxy]', { objectKey, path, proxied });
     return proxied;
   }
 
-  // Se não houver endpoint externo, monta caminho relativo ao BASE_URL
-  if(!RAW_ENDPOINT) {
+  if (!RAW_ENDPOINT) {
     const base = BASE_URL.endsWith('/') ? BASE_URL : `${BASE_URL}/`;
     return `${base}${path}`;
   }
 
-  // Caso contrário, monta URL para endpoint externo
   let base = RAW_ENDPOINT.trim();
-  if(!/^https?:\/\//i.test(base)) {
-    base = `${ENDPOINT_SCHEME}://${base}`;
-  }
+  if (!/^https?:\/\//i.test(base)) base = `${ENDPOINT_SCHEME}://${base}`;
   base = base.replace(/\/$/, '');
   const url = `${base}/slcomp/${path}`;
-  if((import.meta as { env?: Record<string, string> }).env?.VITE_DEBUG_CUTOUTS) console.debug('[cutout-url]', { objectKey, path, url, base, scheme: ENDPOINT_SCHEME });
+  if (DEBUG_CUTOUTS) console.debug('[cutout-url]', { objectKey, path, url });
   return url;
 };
 
-// Cache for blob URLs to avoid re-fetching images
+// Cache of blob URLs keyed by source URL. We intentionally do NOT revoke
+// these on component unmount: react-query keeps the URL string in its cache
+// for `staleTime`, and revoking would leave broken images on remount.
+// The map bounds growth — same URL fetched twice reuses the same blob.
 const blobCache = new Map<string, string>();
 
-// Simple async wrapper (keeps existing calling pattern with react-query)
 export const getCutoutObject = async (objectKey: string): Promise<string | null> => {
   const url = buildCutoutUrl(objectKey);
-  
-  // In dev with proxy we just return the proxied path; browser will request via Vite server
-  if ((import.meta as any).env?.DEV) {
-    return url;
-  }
-  
-  // Check if we already have a blob URL for this image
-  if (blobCache.has(url)) {
-    const cachedUrl = blobCache.get(url)!;
-    if ((import.meta as { env?: Record<string, string> }).env?.VITE_DEBUG_CUTOUTS) {
-      console.debug('[cutout-blob-cache-hit]', { objectKey, url, cachedUrl });
-    }
-    return cachedUrl;
-  }
-  
+
+  if (env.DEV) return url;
+
+  const cached = blobCache.get(url);
+  if (cached) return cached;
+
   try {
-    if ((import.meta as { env?: Record<string, string> }).env?.VITE_DEBUG_CUTOUTS) {
-      console.debug('[cutout-fetch-start]', { objectKey, url });
-    }
-    
-    // In production, fetch the image with proper headers to bypass zrok interstitial
     const response = await fetch(url, {
-      headers: {
-        'skip_zrok_interstitial': 'true',
-        'Accept': 'image/*'
-      },
-      cache: 'force-cache'
+      headers: { skip_zrok_interstitial: 'true', Accept: 'image/*' }
     });
-    
-    if (!response.ok) {
-      throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
-    }
-    
-    // Create blob URL from the response
+    if (!response.ok) throw new Error(`HTTP ${response.status} ${response.statusText}`);
     const blob = await response.blob();
     const blobUrl = URL.createObjectURL(blob);
-    
-    // Cache the blob URL
     blobCache.set(url, blobUrl);
-    
-    if ((import.meta as { env?: Record<string, string> }).env?.VITE_DEBUG_CUTOUTS) {
-      console.debug('[cutout-blob-created]', { objectKey, url, blobUrl, blobSize: blob.size });
-    }
-    
     return blobUrl;
   } catch (error) {
-    console.error('Failed to fetch cutout image:', { objectKey, url, error });
-    // Fallback to direct URL if fetch fails
+    if (DEBUG_CUTOUTS) console.error('[cutout-fetch-failed]', { objectKey, url, error });
     return url;
   }
 };
-
-// Utility function to clean up blob URLs (can be called from components)
-export const revokeBlobUrl = (url: string) => {
-  if (url && url.startsWith('blob:')) {
-    URL.revokeObjectURL(url);
-    // Remove from cache
-    for (const [key, value] of blobCache.entries()) {
-      if (value === url) {
-        blobCache.delete(key);
-        break;
-      }
-    }
-  }
-};
diff --git a/dashboard/src/components/CutoutGrid.tsx b/dashboard/src/components/CutoutGrid.tsx
index 49e6977..ee0ad7c 100644
--- a/dashboard/src/components/CutoutGrid.tsx
+++ b/dashboard/src/components/CutoutGrid.tsx
@@ -1,7 +1,7 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo } from 'react';
 import { Box, Grid, Typography, Paper, Skeleton } from '@mui/material';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { getCutoutObject, revokeBlobUrl } from '../api';
+import { useQuery } from '@tanstack/react-query';
+import { getCutoutObject } from '../api';
 import type { CutoutRecord } from '../types';
 
 interface Props {
@@ -10,15 +10,6 @@ interface Props {
 }
 
 export const CutoutGrid: React.FC<Props> = memo(({ survey, cutouts }) => {
-  // Ao montar, invalida queries dos cutouts para garantir novo fetch
-  const queryClient = useQueryClient();
-  React.useEffect(() => {
-    if (cutouts && cutouts.length > 0) {
-      cutouts.forEach(c => {
-        queryClient.invalidateQueries({ queryKey: ['cutout', c.file_path] });
-      });
-    }
-  }, [cutouts, queryClient]);
   return (
     <Box mt={2}>
       <Typography variant="h6" gutterBottom>{survey}</Typography>
@@ -36,66 +27,45 @@ export const CutoutGrid: React.FC<Props> = memo(({ survey, cutouts }) => {
 CutoutGrid.displayName = 'CutoutGrid';
 
 const CutoutCard: React.FC<{ record: CutoutRecord }> = memo(({ record }) => {
+  // Blob URLs returned by getCutoutObject are kept alive for the session via
+  // the module-level cache in api.ts — we deliberately don't revoke on
+  // unmount to avoid breaking images that react-query will hand back from
+  // its cache when the component remounts.
   const { data, isLoading, error } = useQuery({
     queryKey: ['cutout', record.file_path],
     queryFn: () => getCutoutObject(record.file_path),
-    staleTime: 5 * 60 * 1000, // 5 minutos de cache
-    retry: 1, // Only retry once for ngrok issues
+    staleTime: 5 * 60 * 1000,
+    retry: 1
   });
-  
-  // Clean up blob URLs when component unmounts or data changes
-  useEffect(() => {
-    return () => {
-      if (data) {
-        revokeBlobUrl(data);
-      }
-    };
-  }, [data]);
-  
+
   return (
-    <Paper sx={{ p: 1.5, textAlign: 'center', background: 'linear-gradient(145deg, rgba(40,65,75,0.6), rgba(25,40,50,0.4))', border: '1px solid rgba(90,170,200,0.3)' }}>
-      <Typography variant="caption" sx={{ fontWeight: 700, letterSpacing:0.5 }}>{record.band}</Typography>
-      <Box mt={1} sx={{ position:'relative', width:'100%', maxWidth:160, mx:'auto' }}>
-        <Box sx={{ position:'relative', width:'100%', pt:'100%', borderRadius:2, overflow:'hidden', background:'rgba(255,255,255,0.03)', border:'1px solid rgba(90,170,200,0.15)', display:'flex', alignItems:'center', justifyContent:'center' }}>
-        {isLoading && <Skeleton variant="rectangular" width="100%" height="100%" sx={{ position:'absolute', inset:0 }} />}
-        {!isLoading && data && <img
-          src={data}
-          loading="lazy"
-          decoding="async"
-          alt={record.band + ' cutout'}
-          style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'contain', imageRendering:'auto' }}
-          onError={(e)=>{
-            const img = e.currentTarget;
-            if(img.dataset.fallbackTried) return;
-            img.dataset.fallbackTried = '1';
-            
-            // For blob URLs, we can't retry with different parameters
-            if (img.src.startsWith('blob:')) {
-              return;
-            }
-            
-            // For ngrok/zrok URLs, try adding the bypass parameters as query string
-            if (img.src.includes('ngrok') || img.src.includes('zrok')) {
-              const url = new URL(img.src);
-              url.searchParams.set('skip_zrok_interstitial', 'true');
-              img.src = url.toString();
-              return;
-            }
-            
-            // Extension fallback: try .jpeg -> .png -> .jpg
-            const order = ['.jpeg','.png','.jpg'];
-            const current = order.find(ext => img.src.toLowerCase().includes(ext));
-            const nextExt = current ? order[(order.indexOf(current)+1)%order.length] : null;
-            if(nextExt){
-              const newSrc = img.src.replace(/\.(jpeg|png|jpg)(?=($|\?))/i, nextExt);
-              if(newSrc !== img.src) img.src = newSrc;
-            }
-          }} />}
-        {!isLoading && !data && !error && <Typography variant="caption" color="text.secondary" sx={{ textAlign:'center', px:0.5, position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>No image</Typography>}
-        {error && <Typography variant="caption" color="error" sx={{ textAlign:'center', px:0.5, position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>Error</Typography>}
+    <Paper sx={{ p: 1.5, textAlign: 'center' }}>
+      <Typography variant="caption" sx={{ fontWeight: 700, letterSpacing: 0.5 }}>{record.band}</Typography>
+      <Box mt={1} sx={{ position: 'relative', width: '100%', maxWidth: 160, mx: 'auto' }}>
+        <Box sx={{ position: 'relative', width: '100%', pt: '100%', borderRadius: 2, overflow: 'hidden', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(90,170,200,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {isLoading && <Skeleton variant="rectangular" width="100%" height="100%" sx={{ position: 'absolute', inset: 0 }} />}
+          {!isLoading && data && (
+            <img
+              src={data}
+              loading="lazy"
+              decoding="async"
+              referrerPolicy="no-referrer"
+              alt={record.band + ' cutout'}
+              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }}
+            />
+          )}
+          {!isLoading && !data && !error && (
+            <Typography variant="caption" color="text.secondary" sx={{ textAlign: 'center', px: 0.5, position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              No image
+            </Typography>
+          )}
+          {error && (
+            <Typography variant="caption" color="error" sx={{ textAlign: 'center', px: 0.5, position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              Error
+            </Typography>
+          )}
         </Box>
       </Box>
-      {error && <Typography variant="caption" color="error" sx={{ display:'block', mt:0.5 }}>Err</Typography>}
     </Paper>
   );
 });
diff --git a/dashboard/src/components/DataTables.tsx b/dashboard/src/components/DataTables.tsx
index edad373..97a3d6e 100644
--- a/dashboard/src/components/DataTables.tsx
+++ b/dashboard/src/components/DataTables.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { DataGrid, GridColDef } from '@mui/x-data-grid';
-import { Box, Typography } from '@mui/material';
+import React, { useMemo, useState } from 'react';
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, Typography } from '@mui/material';
 import type { DataRecord, ConsolidatedRecord } from '../types';
 
 interface Props {
@@ -8,79 +7,108 @@ interface Props {
   consolidated: ConsolidatedRecord[];
 }
 
-const isAllEmpty = (rows: Record<string, unknown>[], key: string) => {
-  return rows.every(r => {
-    const v = r[key];
-    return v === null || v === undefined || v === '';
-  });
+const isEmptyVal = (v: unknown) => v === null || v === undefined || v === '';
+
+const formatCell = (v: unknown): string => {
+  if (isEmptyVal(v)) return '';
+  if (typeof v === 'number') return Number.isInteger(v) ? String(v) : v.toString();
+  if (typeof v === 'object') return JSON.stringify(v);
+  return String(v);
 };
 
-const autoCols = (rows: Record<string, unknown>[]): GridColDef[] => {
-  if(!rows || rows.length === 0) return [];
-  const keys = Object.keys(rows[0]).filter(k => k !== 'id');
-  const kept = keys.filter(k => !isAllEmpty(rows, k));
-  return kept.map((k) => ({
-    field: k,
-    headerName: k,
-    flex: 1,
-    minWidth: 120,
-    headerAlign: 'center',
-    align: 'center'
-  }));
+interface SimpleTableProps {
+  rows: Record<string, unknown>[];
+}
+
+const SimpleTable: React.FC<SimpleTableProps> = ({ rows }) => {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(50);
+
+  const columns = useMemo(() => {
+    if (rows.length === 0) return [] as string[];
+    const keys = Object.keys(rows[0]).filter(k => k !== 'id');
+    return keys.filter(k => !rows.every(r => isEmptyVal(r[k])));
+  }, [rows]);
+
+  const pageRows = useMemo(() => {
+    const start = page * pageSize;
+    return rows.slice(start, start + pageSize);
+  }, [rows, page, pageSize]);
+
+  if (rows.length === 0) {
+    return <Typography variant="body2" color="text.secondary">No rows.</Typography>;
+  }
+
+  return (
+    <Box sx={{ width: '100%', border: '1px solid rgba(90,170,200,0.25)', borderRadius: 2, overflow: 'hidden' }}>
+      <TableContainer sx={{ maxHeight: 480 }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              {columns.map(c => (
+                <TableCell
+                  key={c}
+                  align="center"
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: 12,
+                    background: '#0f1c27',
+                    borderBottom: '1px solid rgba(255,255,255,0.08)',
+                    whiteSpace: 'nowrap'
+                  }}
+                >
+                  {c}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {pageRows.map((r, i) => (
+              <TableRow
+                key={i}
+                sx={{
+                  '&:nth-of-type(even)': { backgroundColor: 'rgba(255,255,255,0.02)' },
+                  '&:hover': { backgroundColor: 'rgba(255,255,255,0.04)' }
+                }}
+              >
+                {columns.map(c => (
+                  <TableCell
+                    key={c}
+                    align="center"
+                    sx={{ fontSize: 12, borderBottom: '1px solid rgba(255,255,255,0.04)', whiteSpace: 'nowrap' }}
+                  >
+                    {formatCell(r[c])}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={rows.length}
+        page={page}
+        onPageChange={(_, p) => setPage(p)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => { setPageSize(parseInt(e.target.value, 10)); setPage(0); }}
+        rowsPerPageOptions={[25, 50, 100]}
+        sx={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}
+      />
+    </Box>
+  );
 };
 
 export const DataTables: React.FC<Props> = ({ database, consolidated }) => {
-  const dbCols = autoCols(database);
-  const consCols = autoCols(consolidated);
   return (
     <Box display="flex" flexDirection="column" gap={6}>
       <Box>
-        <Typography variant="h6" sx={{ mb: 1, textAlign:'left' }}>Full Dataset Record</Typography>
-        <Box sx={{ width: '100%', overflowX: 'auto' }}>
-          <DataGrid
-            autoHeight
-            disableColumnMenu
-            disableRowSelectionOnClick
-            density="compact"
-            rows={database.map((r:DataRecord,i:number)=>({id:i,...r}))}
-            columns={dbCols}
-            getRowId={(r: Record<string, unknown> & { id: number })=>r.id}
-            rowSelection={false}
-            initialState={{ pagination: { paginationModel: { pageSize: 50, page: 0 } } }}
-            sx={{
-              '& .MuiDataGrid-cell': { justifyContent: 'center' },
-              '& .MuiDataGrid-columnHeaders': { background: 'rgba(255,255,255,0.04)' },
-              '& .MuiDataGrid-columnHeaderTitle': { fontWeight: 600 },
-              '& .MuiDataGrid-row:nth-of-type(even)': { backgroundColor: 'rgba(255,255,255,0.02)' },
-              border: '1px solid rgba(90,170,200,0.25)',
-              borderRadius: 2
-            }}
-          />
-        </Box>
+        <Typography variant="h6" sx={{ mb: 1, textAlign: 'left' }}>Full Dataset Record</Typography>
+        <SimpleTable rows={database as Record<string, unknown>[]} />
       </Box>
       <Box>
-        <Typography variant="h6" sx={{ mb: 1, textAlign:'left' }}>Consolidated Parameters</Typography>
-        <Box sx={{ width: '100%', overflowX: 'auto' }}>
-          <DataGrid
-            autoHeight
-            disableColumnMenu
-            disableRowSelectionOnClick
-            density="compact"
-            rows={consolidated.map((r:ConsolidatedRecord,i:number)=>({id:i,...r}))}
-            columns={consCols}
-            getRowId={(r: Record<string, unknown> & { id: number })=>r.id}
-            rowSelection={false}
-            initialState={{ pagination: { paginationModel: { pageSize: 50, page: 0 } } }}
-            sx={{
-              '& .MuiDataGrid-cell': { justifyContent: 'center' },
-              '& .MuiDataGrid-columnHeaders': { background: 'rgba(255,255,255,0.04)' },
-              '& .MuiDataGrid-columnHeaderTitle': { fontWeight: 600 },
-              '& .MuiDataGrid-row:nth-of-type(even)': { backgroundColor: 'rgba(255,255,255,0.02)' },
-              border: '1px solid rgba(90,170,200,0.25)',
-              borderRadius: 2
-            }}
-          />
-        </Box>
+        <Typography variant="h6" sx={{ mb: 1, textAlign: 'left' }}>Consolidated Parameters</Typography>
+        <SimpleTable rows={consolidated as Record<string, unknown>[]} />
       </Box>
     </Box>
   );
diff --git a/dashboard/src/components/FiltersDrawer.tsx b/dashboard/src/components/FiltersDrawer.tsx
index 631e391..8b1d636 100644
--- a/dashboard/src/components/FiltersDrawer.tsx
+++ b/dashboard/src/components/FiltersDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Drawer, Box, IconButton, Typography, Divider, Slider, TextField, Chip, Stack, Button, Collapse } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -45,17 +45,11 @@ export const FiltersDrawer: React.FC<Props> = ({ open, onClose, allReferences, n
     setLocalNumeric(init);
   }, [domain, numericFields, value.numeric]);
 
-  // Debounced JNAME search (user stops typing 300ms)
-  const [searchDraft, setSearchDraft] = useState(value.jnameSearch);
-  useEffect(()=> setSearchDraft(value.jnameSearch), [value.jnameSearch]);
-  useEffect(()=> {
-    const t = setTimeout(()=> {
-      if(searchDraft !== value.jnameSearch){
-        onChange({ ...value, jnameSearch: searchDraft });
-      }
-    }, 300);
-    return ()=> clearTimeout(t);
-  }, [searchDraft, value, onChange]);
+  // No internal debounce — App.tsx debounces filters.jnameSearch once.
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...value, jnameSearch: e.target.value });
+  }, [value, onChange]);
+
   const toggleReference = (ref: string) => {
     const active = new Set(value.references);
     if(active.has(ref)) active.delete(ref); else active.add(ref);
@@ -79,15 +73,13 @@ export const FiltersDrawer: React.FC<Props> = ({ open, onClose, allReferences, n
       anchor="left" 
       open={open} 
       onClose={onClose} 
-      PaperProps={{ 
-        sx: ({ breakpoints }) => ({ 
-          width: { xs: '100%', sm: 320, md: 360 }, 
-          maxWidth: '100%', 
-          background: 'linear-gradient(180deg,#0d1820,#0a141a)', 
-          display:'flex', 
-          flexDirection:'column',
-          borderRight: '1px solid rgba(255,255,255,0.08)'
-        }) 
+      PaperProps={{
+        sx: {
+          width: { xs: '100%', sm: 320, md: 360 },
+          maxWidth: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }
       }}
     >
       <Box sx={{ p:2, pb:1 }}>
@@ -100,9 +92,9 @@ export const FiltersDrawer: React.FC<Props> = ({ open, onClose, allReferences, n
           label="Search JNAME"
           size="small"
           fullWidth
-            value={searchDraft}
-            onChange={e=> setSearchDraft(e.target.value)}
-            sx={{ mb: 2 }}
+          value={value.jnameSearch}
+          onChange={handleSearchChange}
+          sx={{ mb: 2 }}
         />
         <Box display="flex" alignItems="center" justifyContent="space-between" sx={{ cursor:'pointer', mb:1 }} onClick={()=> setRefsCollapsed(c=> !c)}>
           <Typography variant="subtitle2">Reference Catalogs</Typography>
diff --git a/dashboard/src/components/ObjectsTable.tsx b/dashboard/src/components/ObjectsTable.tsx
index a73918a..8d8dfbc 100644
--- a/dashboard/src/components/ObjectsTable.tsx
+++ b/dashboard/src/components/ObjectsTable.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo, useState, useEffect, useCallback, memo } from 'react';
-import { DataGrid, GridColDef } from '@mui/x-data-grid';
-import { Paper, Typography } from '@mui/material';
+import React, { useMemo, useCallback, memo } from 'react';
+import { Box, Paper, Typography } from '@mui/material';
+import { VirtualizedList } from './VirtualizedList';
 
 interface SkyObject {
   JNAME: string;
@@ -9,131 +9,80 @@ interface SkyObject {
 
 interface Props {
   objects: SkyObject[];
-  onSelect: (jname: string)=> void;
+  onSelect: (jname: string) => void;
   selected: string;
   height?: number;
-  fullHeight?: boolean;
 }
 
-export const ObjectsTable: React.FC<Props> = memo(({ objects, onSelect, selected, height=360, fullHeight=false }) => {
-  // Memoize rows computation to avoid recalculation on every render
-  const rows = useMemo(()=> {
-    if (!objects || objects.length === 0) return [];
-    return objects
-      .filter(o=> !!o?.JNAME)
-      .map((o,i)=> ({ id: o.JNAME || i, ...o }));
-  }, [objects]);
-  
-  const cols: GridColDef[] = useMemo(()=> [
-    { field:'JNAME', headerName:'JNAME', flex:1, minWidth:160 }
-  ], []);
+const ROW_HEIGHT = 28;
 
-  // NOTE: DataGrid MIT version limits pageSize to 100 (larger requires Pro/Premium)
-  // Keep state capped at 100 to avoid runtime errors.
-  const [pageSize, setPageSize] = useState(100);
-  const [page, setPage] = useState(0);
+export const ObjectsTable: React.FC<Props> = memo(({ objects, onSelect, selected, height = 360 }) => {
+  // Pre-filter once. Items keep stable identity across renders via JNAME.
+  const items = useMemo(() => objects.filter(o => !!o?.JNAME), [objects]);
 
-  // Optimize callbacks with useCallback and dependency arrays
-  const handleRowClick = useCallback((params: any) => {
-    onSelect(params.row.JNAME);
-  }, [onSelect]);
+  const selectedIndex = useMemo(() => {
+    if (!selected) return -1;
+    for (let i = 0; i < items.length; i++) if (items[i].JNAME === selected) return i;
+    return -1;
+  }, [items, selected]);
 
-  const handlePaginationChange = useCallback((model: any) => {
-    if (model.page !== page) setPage(model.page);
-    if (model.pageSize !== pageSize) {
-      // Guard against attempts to exceed MIT cap
-      const safeSize = Math.min(100, model.pageSize || 100);
-      setPageSize(safeSize);
-    }
-  }, [page, pageSize]);
+  // Reserve room for header + count line.
+  const HEADER_RESERVED = 28;
+  const listHeight = Math.max(80, height - HEADER_RESERVED);
 
-  // Optimized selection following with reduced re-computation
-  const selectedRowIndex = useMemo(() => {
-    if (!selected || !rows.length) return -1;
-    return rows.findIndex(r => r.JNAME === selected);
-  }, [selected, rows]);
-
-  useEffect(() => {
-    if (selectedRowIndex >= 0) {
-      const newPage = Math.floor(selectedRowIndex / pageSize);
-      if (newPage !== page) setPage(newPage);
-    }
-  }, [selectedRowIndex, pageSize, page]);
-
-  const header = useMemo(() => (
-    <Typography variant="caption" sx={{ pl:1, fontWeight:600, letterSpacing:0.5 }}>
-      Filtered Objects ({objects.length})
-    </Typography>
-  ), [objects.length]);
-
-  // Memoize DataGrid props to prevent unnecessary re-renders
-  const dataGridProps = useMemo(() => ({
-    rows,
-    columns: cols,
-    density: "compact" as const,
-    disableColumnMenu: true,
-    sortingOrder: ['asc','desc'] as const,
-    disableRowSelectionOnClick: true,
-    onRowClick: handleRowClick,
-    getRowClassName: (params: any) => params.row.JNAME === selected ? 'selected-row' : '',
-    paginationModel: { page, pageSize },
-    onPaginationModelChange: handlePaginationChange,
-    // Performance optimizations
-    disableVirtualization: false, // Keep virtualization enabled
-    rowBufferPx: 100, // Reduce buffer for better performance
-    columnBufferPx: 100,
-  }), [rows, cols, handleRowClick, selected, page, pageSize, handlePaginationChange]);
-
-  // Memoize styles to prevent recalculation
-  const dataGridStyles = useMemo(() => ({
-    '& .MuiDataGrid-virtualScroller': { overflowX:'hidden' },
-    '& .MuiDataGrid-cell': { fontSize:12 },
-    '& .MuiDataGrid-columnHeaders': { background:'rgba(255,255,255,0.04)', backdropFilter:'blur(6px)' },
-    '& .selected-row .MuiDataGrid-cell': { background:'rgba(0,120,180,0.25)!important' },
-    '& .MuiDataGrid-row:hover': { background:'rgba(255,255,255,0.02)' }
-  }), []);
-
-  const paperStyles = useMemo(() => ({
-    display:'flex', 
-    flexDirection:'column', 
-    p:1, 
-    height:'100%', 
-    background:'rgba(255,255,255,0.02)', 
-    backdropFilter:'blur(4px)', 
-    border:'1px solid rgba(255,255,255,0.05)'
-  }), []);
+  const renderItem = useCallback(
+    (item: SkyObject, _idx: number) => {
+      const isSel = item.JNAME === selected;
+      return (
+        <Box
+          onClick={() => onSelect(item.JNAME)}
+          sx={{
+            height: ROW_HEIGHT,
+            display: 'flex',
+            alignItems: 'center',
+            px: 1,
+            cursor: 'pointer',
+            fontSize: 12,
+            fontFamily: 'inherit',
+            color: 'text.primary',
+            borderBottom: '1px solid rgba(255,255,255,0.04)',
+            background: isSel ? 'rgba(0,120,180,0.28)' : 'transparent',
+            '&:hover': { background: isSel ? 'rgba(0,120,180,0.32)' : 'rgba(255,255,255,0.04)' },
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}
+        >
+          {item.JNAME}
+        </Box>
+      );
+    },
+    [onSelect, selected]
+  );
 
-  if(fullHeight){
-    return (
-      <Paper sx={paperStyles}>
-        {header}
-        <div style={{ flex:1, minHeight:0, width:'100%', marginTop:4 }}>
-          <DataGrid
-            {...dataGridProps}
-            hideFooter
-            pagination
-            sx={{
-              height:'100%',
-              ...dataGridStyles
-            }}
-          />
-        </div>
-      </Paper>
-    );
-  }
+  const itemKey = useCallback((it: SkyObject) => it.JNAME, []);
 
   return (
-    <Paper sx={{ p:1, background:'rgba(255,255,255,0.02)', backdropFilter:'blur(4px)', border:'1px solid rgba(255,255,255,0.05)' }}>
-      {header}
-      <div style={{ height, width:'100%', marginTop:4 }}>
-        <DataGrid
-          {...dataGridProps}
-          pagination
-          sx={dataGridStyles}
-          // Only expose allowed page sizes within MIT license limit
-          pageSizeOptions={[25,50,75,100]}
-        />
-      </div>
+    <Paper sx={{ p: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="caption" sx={{ pl: 1, fontWeight: 600, letterSpacing: 0.5, mb: 0.5 }}>
+        Filtered Objects ({items.length})
+      </Typography>
+      <Box sx={{ flex: 1, minHeight: 0, border: '1px solid rgba(255,255,255,0.06)', borderRadius: 1, overflow: 'hidden', background: 'rgba(0,0,0,0.2)' }}>
+        {items.length === 0 ? (
+          <Box sx={{ p: 2 }}>
+            <Typography variant="caption" color="text.secondary">No objects.</Typography>
+          </Box>
+        ) : (
+          <VirtualizedList
+            items={items}
+            renderItem={renderItem}
+            itemHeight={ROW_HEIGHT}
+            containerHeight={listHeight}
+            scrollToIndex={selectedIndex}
+            itemKey={itemKey}
+          />
+        )}
+      </Box>
     </Paper>
   );
 });
diff --git a/dashboard/src/components/SkyMap.tsx b/dashboard/src/components/SkyMap.tsx
index 40173ae..172b8f4 100644
--- a/dashboard/src/components/SkyMap.tsx
+++ b/dashboard/src/components/SkyMap.tsx
@@ -1,18 +1,19 @@
 import React, { useMemo, useRef, useEffect, useState, useCallback, memo } from 'react';
 import { Paper, Typography } from '@mui/material';
+import SkyProjectionWorker from '../workers/skyProjectionWorker?worker';
 
-interface SkyObject { 
-  JNAME: string; 
-  RA?: number | null; 
-  DEC?: number | null; 
-  [k:string]: unknown;
+interface SkyObject {
+  JNAME: string;
+  RA?: number | null;
+  DEC?: number | null;
+  [k: string]: unknown;
 }
 
 interface Props {
   objects: SkyObject[];
   height?: number;
   width?: number;
-  onSelect: (jname: string)=> void;
+  onSelect: (jname: string) => void;
   selected: string;
 }
 
@@ -24,559 +25,470 @@ interface ProjectedPoint {
   dec: number;
 }
 
-// Web Worker wrapper for sky projection
-class SkyProjectionWorker {
+const MAX_X = 2 * Math.SQRT2;
+const MAX_Y = Math.SQRT2;
+
+// --- Projection helpers (used as main-thread fallback) ---
+const raToLon = (raDeg: number) => {
+  const wrapped = ((raDeg + 180) % 360) - 180;
+  return -wrapped;
+};
+const deg2rad = (d: number) => d * Math.PI / 180;
+const toNum = (v: unknown) => typeof v === 'number' ? v : typeof v === 'string' ? parseFloat(v) : NaN;
+
+function solveTheta(phi: number) {
+  const HALF_PI = Math.PI / 2;
+  if (Math.abs(Math.abs(phi) - HALF_PI) < 1e-12) return Math.sign(phi) * HALF_PI;
+  let theta = Math.max(-HALF_PI, Math.min(HALF_PI, phi));
+  for (let i = 0; i < 12; i++) {
+    const f = 2 * theta + Math.sin(2 * theta) - Math.PI * Math.sin(phi);
+    const fp = 2 + 2 * Math.cos(2 * theta);
+    if (Math.abs(fp) < 1e-12) break;
+    const delta = f / fp;
+    theta -= delta;
+    if (Math.abs(delta) < 1e-10) break;
+  }
+  return theta;
+}
+
+function projectMainThread(objects: SkyObject[]): ProjectedPoint[] {
+  const result: ProjectedPoint[] = [];
+  for (const o of objects) {
+    if (!o) continue;
+    let RA = toNum(o.RA);
+    let DEC = toNum(o.DEC);
+    if (isNaN(RA) || isNaN(DEC)) continue;
+    if (RA < 0) RA = ((RA % 360) + 360) % 360;
+    if (RA >= 360) RA = RA % 360;
+    if (DEC < -90 || DEC > 90) continue;
+    const lon = deg2rad(raToLon(RA));
+    const lat = deg2rad(DEC);
+    const theta = solveTheta(lat);
+    const xNorm = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
+    const yNorm = -Math.SQRT2 * Math.sin(theta);
+    result.push({ x: xNorm, y: yNorm, jname: o.JNAME, ra: RA, dec: DEC });
+  }
+  return result;
+}
+
+// --- Worker singleton (typed module worker via Vite's ?worker import) ---
+class WorkerPool {
   private worker: Worker | null = null;
-  private requestId = 0;
-  private pendingRequests = new Map<number, (result: ProjectedPoint[]) => void>();
+  private nextId = 0;
+  private pending = new Map<number, (r: ProjectedPoint[]) => void>();
 
   constructor() {
     try {
-      // Create worker from inline script to avoid bundling issues
-      const workerScript = `
-        const raToLon = (raDeg) => {
-          const wrapped = ((raDeg + 180) % 360) - 180;
-          return -wrapped;
-        };
-        
-        const deg2rad = (d) => d * Math.PI / 180;
-        
-        function solveTheta(phi) {
-          const HALF_PI = Math.PI / 2;
-          if (Math.abs(Math.abs(phi) - HALF_PI) < 1e-12) {
-            return Math.sign(phi) * HALF_PI;
-          }
-          let theta = Math.max(-HALF_PI, Math.min(HALF_PI, phi));
-          for (let i = 0; i < 12; i++) {
-            const f = 2 * theta + Math.sin(2 * theta) - Math.PI * Math.sin(phi);
-            const fp = 2 + 2 * Math.cos(2 * theta);
-            if (Math.abs(fp) < 1e-12) break;
-            const delta = f / fp;
-            theta -= delta;
-            if (Math.abs(delta) < 1e-10) break;
-          }
-          return theta;
-        }
-        
-        function projectObjects(objects) {
-          const result = [];
-          for (const o of objects) {
-            if (!o) continue;
-            const toNum = (v) => typeof v === 'number' ? v : (typeof v === 'string' ? parseFloat(v) : NaN);
-            let RA = toNum(o.RA);
-            let DEC = toNum(o.DEC);
-            if (isNaN(RA) || isNaN(DEC)) continue;
-            if (RA < 0) RA = ((RA % 360) + 360) % 360;
-            if (RA >= 360) RA = RA % 360;
-            if (DEC < -90 || DEC > 90) continue;
-            const lon = deg2rad(raToLon(RA));
-            const lat = deg2rad(DEC);
-            const theta = solveTheta(lat);
-            const xNorm = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
-            const yNorm = -Math.SQRT2 * Math.sin(theta);
-            result.push({ x: xNorm, y: yNorm, jname: o.JNAME, ra: RA, dec: DEC });
-          }
-          return result;
-        }
-        
-        self.onmessage = function(e) {
-          const { objects, requestId } = e.data;
-          try {
-            const projectedPoints = projectObjects(objects);
-            self.postMessage({ requestId, projectedPoints, success: true });
-          } catch (error) {
-            self.postMessage({ requestId, error: error.message, success: false });
-          }
-        };
-      `;
-      
-      const blob = new Blob([workerScript], { type: 'application/javascript' });
-      this.worker = new Worker(URL.createObjectURL(blob));
-      
-      this.worker.onmessage = (e) => {
-        const { requestId, projectedPoints, success } = e.data;
-        const callback = this.pendingRequests.get(requestId);
-        if (callback && success) {
-          callback(projectedPoints);
-          this.pendingRequests.delete(requestId);
+      this.worker = new SkyProjectionWorker();
+      this.worker.onmessage = (e: MessageEvent) => {
+        const { requestId, projectedPoints, success } = e.data || {};
+        const cb = this.pending.get(requestId);
+        if (cb && success) {
+          cb(projectedPoints);
+          this.pending.delete(requestId);
         }
       };
-    } catch (error) {
-      console.warn('Web Worker not available, falling back to main thread');
+    } catch {
+      this.worker = null;
     }
   }
 
-  async projectObjects(objects: SkyObject[]): Promise<ProjectedPoint[]> {
-    // Fallback to main thread if worker unavailable or for small datasets
+  project(objects: SkyObject[]): Promise<ProjectedPoint[]> {
     if (!this.worker || objects.length < 1000) {
-      return this.projectObjectsMainThread(objects);
+      return Promise.resolve(projectMainThread(objects));
     }
-
     return new Promise((resolve) => {
-      const id = ++this.requestId;
-      this.pendingRequests.set(id, resolve);
+      const id = ++this.nextId;
+      this.pending.set(id, resolve);
       this.worker!.postMessage({ objects, requestId: id });
-      
-      // Timeout fallback
+      // Generous timeout — large datasets can legitimately take a few seconds.
       setTimeout(() => {
-        if (this.pendingRequests.has(id)) {
-          this.pendingRequests.delete(id);
-          resolve(this.projectObjectsMainThread(objects));
+        if (this.pending.has(id)) {
+          this.pending.delete(id);
+          resolve(projectMainThread(objects));
         }
-      }, 1000);
+      }, 15000);
     });
   }
 
-  private projectObjectsMainThread(objects: SkyObject[]): ProjectedPoint[] {
-    const result: ProjectedPoint[] = [];
-    const raToLon = (raDeg: number) => {
-      const wrapped = ((raDeg + 180) % 360) - 180;
-      return -wrapped;
-    };
-    const deg2rad = (d: number) => d * Math.PI / 180;
-    
-    function solveTheta(phi: number) {
-      const HALF_PI = Math.PI / 2;
-      if (Math.abs(Math.abs(phi) - HALF_PI) < 1e-12) {
-        return Math.sign(phi) * HALF_PI;
-      }
-      let theta = Math.max(-HALF_PI, Math.min(HALF_PI, phi));
-      for (let i = 0; i < 12; i++) {
-        const f = 2 * theta + Math.sin(2 * theta) - Math.PI * Math.sin(phi);
-        const fp = 2 + 2 * Math.cos(2 * theta);
-        if (Math.abs(fp) < 1e-12) break;
-        const delta = f / fp;
-        theta -= delta;
-        if (Math.abs(delta) < 1e-10) break;
-      }
-      return theta;
-    }
-
-    for (const o of objects) {
-      if (!o) continue;
-      const toNum = (v: any) => typeof v === 'number' ? v : (typeof v === 'string' ? parseFloat(v) : NaN);
-      let RA = toNum(o.RA);
-      let DEC = toNum(o.DEC);
-      if (isNaN(RA) || isNaN(DEC)) continue;
-      if (RA < 0) RA = ((RA % 360) + 360) % 360;
-      if (RA >= 360) RA = RA % 360;
-      if (DEC < -90 || DEC > 90) continue;
-      const lon = deg2rad(raToLon(RA));
-      const lat = deg2rad(DEC);
-      const theta = solveTheta(lat);
-      const xNorm = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
-      const yNorm = -Math.SQRT2 * Math.sin(theta);
-      result.push({ x: xNorm, y: yNorm, jname: o.JNAME, ra: RA, dec: DEC });
-    }
-    return result;
-  }
-
   destroy() {
-    if (this.worker) {
-      this.worker.terminate();
-      this.worker = null;
-    }
-    this.pendingRequests.clear();
+    this.worker?.terminate();
+    this.worker = null;
+    this.pending.clear();
   }
 }
 
-const workerInstance = new SkyProjectionWorker();
+const workerPool = new WorkerPool();
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', () => workerPool.destroy());
+}
 
-export const SkyMap: React.FC<Props> = memo(({ objects, height=360, width=600, onSelect, selected }) => {
+export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 600, onSelect, selected }) => {
   const padding = 16;
-  const canvasRef = useRef<HTMLCanvasElement|null>(null);
-  const containerRef = useRef<HTMLDivElement|null>(null);
+  const baseCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const overlayCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
   const [canvasW, setCanvasW] = useState<number>(width);
-  const [canvasH, setCanvasH] = useState<number>(height-26);
+  const [canvasH, setCanvasH] = useState<number>(height - 26);
   const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({x:0,y:0});
+  const [pan, setPan] = useState({ x: 0, y: 0 });
   const isPanningRef = useRef(false);
-  const lastPosRef = useRef({x:0,y:0});
+  const lastPosRef = useRef({ x: 0, y: 0 });
   const [pts, setPts] = useState<ProjectedPoint[]>([]);
   const [isProjecting, setIsProjecting] = useState(false);
 
-  const maxX = 2*Math.SQRT2;
-  const maxY = Math.SQRT2;
-
-  // Async projection with worker
+  // Async projection.
   useEffect(() => {
+    let cancelled = false;
     if (!objects || objects.length === 0) {
       setPts([]);
+      setIsProjecting(false);
       return;
     }
-
     setIsProjecting(true);
-    workerInstance.projectObjects(objects).then((projectedPoints) => {
-      setPts(projectedPoints);
+    workerPool.project(objects).then((p) => {
+      if (cancelled) return;
+      setPts(p);
       setIsProjecting(false);
     });
+    return () => { cancelled = true; };
   }, [objects]);
 
-  // Resize observer to adapt width (fill parent)
-  useEffect(()=>{
-    if(!containerRef.current) return;
-    const ro = new ResizeObserver(entries=>{
-      for(const e of entries){
-        const w = e.contentRect.width;
-        setCanvasW(w);
-        setCanvasH(height-26);
-      }
+  // Width tracker.
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const e of entries) setCanvasW(e.contentRect.width);
     });
     ro.observe(containerRef.current);
-    return ()=> ro.disconnect();
-  },[height]);
-
-  // Optimized drawing function with requestAnimationFrame throttling
-  const drawFrame = useRef<number>();
-  const lastDrawTime = useRef<number>(0);
-  // When true we already have a frame scheduled / drawing in progress.
-  // Start as false so the first schedule actually enqueues a draw.
-  const needsRedraw = useRef<boolean>(false);
-
-  const draw = useCallback(()=>{
-    const canvas = canvasRef.current; 
-    if(!canvas) return;
-    const ctx = canvas.getContext('2d'); 
-    if(!ctx) return;
-    
-    const w = canvasW * dpr; 
+    return () => ro.disconnect();
+  }, []);
+
+  useEffect(() => { setCanvasH(height - 26); }, [height]);
+
+  // Shared transform for hit-testing and overlay.
+  const transform = useMemo(() => {
+    const innerW = canvasW - padding * 2;
+    const innerH = canvasH - padding * 2;
+    return {
+      baseScaleX: innerW / (MAX_X * 2),
+      baseScaleY: innerH / (MAX_Y * 2),
+      centerX: canvasW / 2 + pan.x,
+      centerY: canvasH / 2 + pan.y
+    };
+  }, [canvasW, canvasH, pan.x, pan.y]);
+
+  // --- Base layer: grid + non-selected points. Redraws only on data/viewport change. ---
+  useEffect(() => {
+    const canvas = baseCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const w = canvasW * dpr;
     const h = canvasH * dpr;
-    if(canvas.width !== w || canvas.height !== h){
-      canvas.width = w; 
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
       canvas.height = h;
     }
-    
     ctx.save();
-    ctx.scale(dpr,dpr);
-    ctx.clearRect(0,0,canvasW,canvasH);
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, canvasW, canvasH);
 
-    const innerW = canvasW - padding*2;
-    const innerH = canvasH - padding*2;
-    const baseScaleX = innerW / (maxX*2);
-    const baseScaleY = innerH / (maxY*2);
-    const centerX = canvasW/2 + pan.x;
-    const centerY = canvasH/2 + pan.y;
+    const { baseScaleX, baseScaleY, centerX, centerY } = transform;
 
-    // Outline ellipse
+    // Outline ellipse.
     ctx.save();
     ctx.translate(centerX, centerY);
-    ctx.scale(baseScaleX*zoom, baseScaleY*zoom);
+    ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
     ctx.beginPath();
-    ctx.ellipse(0,0,maxX,maxY,0,0,Math.PI*2);
+    ctx.ellipse(0, 0, MAX_X, MAX_Y, 0, 0, Math.PI * 2);
     ctx.fillStyle = 'rgba(40,120,150,0.05)';
     ctx.fill();
-    ctx.lineWidth = 1/Math.max(baseScaleX*zoom, baseScaleY*zoom);
+    ctx.lineWidth = 1 / Math.max(baseScaleX * zoom, baseScaleY * zoom);
     ctx.strokeStyle = 'rgba(120,200,220,0.5)';
     ctx.stroke();
     ctx.restore();
 
-    // Helper to draw lines in world space
-    const worldLine = (segments: number[][], stroke:string, lw=0.5)=>{
+    const worldLine = (segments: number[][], stroke: string, lw = 0.5) => {
       ctx.save();
       ctx.translate(centerX, centerY);
-      ctx.scale(baseScaleX*zoom, baseScaleY*zoom);
+      ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
       ctx.beginPath();
-      for(let i=0;i<segments.length;i++){
-        const [x,y,move] = segments[i] as [number,number,number];
-        if(move) ctx.moveTo(x,y); else ctx.lineTo(x,y);
+      for (let i = 0; i < segments.length; i++) {
+        const [x, y, move] = segments[i] as [number, number, number];
+        if (move) ctx.moveTo(x, y); else ctx.lineTo(x, y);
       }
-      ctx.lineWidth = lw/Math.max(baseScaleX*zoom, baseScaleY*zoom);
+      ctx.lineWidth = lw / Math.max(baseScaleX * zoom, baseScaleY * zoom);
       ctx.strokeStyle = stroke;
       ctx.stroke();
       ctx.restore();
     };
 
-    // Only draw grid if zoomed enough (performance optimization)
     if (zoom > 0.7) {
-      // RA meridians every 30°
-      for(let raDeg=0; raDeg<360; raDeg+=30){
-        const lonDeg = (((raDeg + 180) % 360) - 180) * -1; // raToLon inline
-        const lon = lonDeg * Math.PI / 180; // deg2rad inline
+      for (let raDeg = 0; raDeg < 360; raDeg += 30) {
+        const lonDeg = (((raDeg + 180) % 360) - 180) * -1;
+        const lon = lonDeg * Math.PI / 180;
         const seg: number[][] = [];
-        for(let latDeg=-90; latDeg<=90; latDeg+=6){ // Reduced resolution
+        for (let latDeg = -90; latDeg <= 90; latDeg += 6) {
           const lat = latDeg * Math.PI / 180;
-          // Simplified theta calculation for grid lines
-          const theta = Math.max(-Math.PI/2, Math.min(Math.PI/2, lat));
-          const x = (2*Math.SQRT2/Math.PI) * lon * Math.cos(theta);
-          const y = -Math.SQRT2 * Math.sin(theta)
-          seg.push([x,y,latDeg===-90?1:0]);
+          const theta = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, lat));
+          const x = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
+          const y = -Math.SQRT2 * Math.sin(theta);
+          seg.push([x, y, latDeg === -90 ? 1 : 0]);
         }
-        worldLine(seg,'rgba(255,255,255,0.08)');
+        worldLine(seg, 'rgba(255,255,255,0.08)');
       }
-
-      // DEC parallels (reduced set)
-      const latLines = [-60,-30,0,30,60];
-      for(const latDeg of latLines){
+      for (const latDeg of [-60, -30, 0, 30, 60]) {
         const lat = latDeg * Math.PI / 180;
-        const theta = Math.max(-Math.PI/2, Math.min(Math.PI/2, lat));
+        const theta = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, lat));
         const seg: number[][] = [];
-        for(let raDeg=0; raDeg<=360; raDeg+=6){ // Reduced resolution
+        for (let raDeg = 0; raDeg <= 360; raDeg += 6) {
           const lonDeg = (((raDeg + 180) % 360) - 180) * -1;
           const lon = lonDeg * Math.PI / 180;
-          const x = (2*Math.SQRT2/Math.PI) * lon * Math.cos(theta);
+          const x = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
           const y = Math.SQRT2 * Math.sin(theta);
-          seg.push([x,y,raDeg===0?1:0]);
+          seg.push([x, y, raDeg === 0 ? 1 : 0]);
         }
-        worldLine(seg,'rgba(255,255,255,0.08)');
+        worldLine(seg, 'rgba(255,255,255,0.08)');
       }
-
-      // Labels (only if zoomed enough)
       if (zoom > 1.2) {
         ctx.save();
         ctx.font = '10px Roboto, sans-serif';
         ctx.fillStyle = 'rgba(255,255,255,0.85)';
         ctx.textAlign = 'center';
-        // RA labels (reduced set)
-        for(let raDeg=0; raDeg<360; raDeg+=60){
+        for (let raDeg = 0; raDeg < 360; raDeg += 60) {
           const lonDeg = (((raDeg + 180) % 360) - 180) * -1;
           const lon = lonDeg * Math.PI / 180;
-          const x = (2*Math.SQRT2/Math.PI) * lon * Math.cos(0);
-          const y = -maxY + 0.05;
-          const sx = centerX + (x * baseScaleX*zoom);
-          const sy = centerY + (y * baseScaleY*zoom) + 10;
+          const x = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(0);
+          const y = -MAX_Y + 0.05;
+          const sx = centerX + x * baseScaleX * zoom;
+          const sy = centerY + y * baseScaleY * zoom + 10;
           ctx.fillText(`${raDeg}°`, sx, sy);
         }
         ctx.textAlign = 'left';
-        for(const latDeg of [-60,0,60]){
+        for (const latDeg of [-60, 0, 60]) {
           const lat = latDeg * Math.PI / 180;
-          const theta = Math.max(-Math.PI/2, Math.min(Math.PI/2, lat));
+          const theta = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, lat));
           const y = -Math.SQRT2 * Math.sin(theta);
-          const x = -maxX + 0.05;
-          const sx = centerX + (x * baseScaleX*zoom);
-          const sy = centerY + (y * baseScaleY*zoom) + 3;
+          const x = -MAX_X + 0.05;
+          const sx = centerX + x * baseScaleX * zoom;
+          const sy = centerY + y * baseScaleY * zoom + 3;
           ctx.fillText(`${latDeg}°`, sx, sy);
         }
         ctx.restore();
       }
     }
 
-    // Optimized point rendering with LOD (Level of Detail)
+    // Points (excluding selected).
     ctx.save();
     ctx.translate(centerX, centerY);
-    ctx.scale(baseScaleX*zoom, baseScaleY*zoom);
-    
+    ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
+
     const n = pts.length || 1;
     const basePx = Math.max(0.8, Math.min(2.0, 12 / Math.sqrt(n)));
-    const selectedMinPx = 6;
     const zoomComp = Math.pow(zoom, 0.1);
     const basePxAdj = basePx * zoomComp;
-    const pxToWorld = 1 / (baseScaleX*zoom);
-
-    // Use different rendering strategies based on point count and zoom
-    const shouldUseSimpleRender = n > 5000 && zoom < 2;
-    
-    if (shouldUseSimpleRender) {
-      // Simple rendering for many points
-      ctx.fillStyle = 'rgba(90,180,220,0.78)';
-      ctx.beginPath();
-      for(const p of pts){
-        if(p.jname === selected) continue;
-        const rWorld = basePxAdj * pxToWorld;
-        ctx.moveTo(p.x + rWorld, p.y);
-        ctx.arc(p.x, p.y, rWorld, 0, Math.PI*2);
-      }
-      ctx.fill();
-    } else {
-      // Detailed rendering for fewer points
-      for(const p of pts){
-        if(p.jname === selected) continue;
-        const rWorld = basePxAdj * pxToWorld;
-        ctx.beginPath();
-        ctx.arc(p.x,p.y, rWorld,0,Math.PI*2);
-        ctx.fillStyle = 'rgba(90,180,220,0.78)';
-        ctx.strokeStyle = 'rgba(0,0,0,0.45)';
-        ctx.lineWidth = 0.3/Math.max(baseScaleX*zoom, baseScaleY*zoom);
-        ctx.fill();
-        ctx.stroke();
-      }
-    }
+    const pxToWorld = 1 / (baseScaleX * zoom);
+    const rWorld = basePxAdj * pxToWorld;
 
-    // Selected point with colorful hue/star animation
-    if(selected){
-      const p = pts.find(pt=> pt.jname === selected);
-      if(p){
-        const targetPx = Math.max(selectedMinPx, basePxAdj * 5.2);
-        const rWorld = targetPx * pxToWorld;
-        const t = performance.now() * 0.001;
-        const tw = 0.55 + 0.45 * 0.5 * (Math.sin(t*5.0) + Math.sin(t*3.2 + 1.3));
-        const gradOuter = rWorld * (2.8 + 0.4*Math.sin(t*2.2));
-        const hue = (t*40) % 360;
-        const hue2 = (hue + 25) % 360;
-        const hue3 = (hue + 55) % 360;
-        const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, gradOuter);
-        g.addColorStop(0, `hsla(${hue}, 95%, 78%, ${(0.90*tw).toFixed(3)})`);
-        g.addColorStop(0.25, `hsla(${hue2}, 90%, 62%, ${(0.42*tw).toFixed(3)})`);
-        g.addColorStop(0.55, `hsla(${hue3}, 85%, 50%, ${(0.18*tw).toFixed(3)})`);
-        g.addColorStop(1, `hsla(${hue3}, 85%, 40%, 0)`);
-        ctx.save();
-        ctx.beginPath();
-        ctx.fillStyle = g;
-        ctx.arc(p.x,p.y, gradOuter, 0, Math.PI*2);
-        ctx.fill();
-        ctx.restore();
-        // core
-        ctx.beginPath();
-        ctx.arc(p.x,p.y, rWorld*0.6, 0, Math.PI*2);
-        ctx.fillStyle = `hsla(${hue}, 95%, 88%, 0.92)`;
-        ctx.fill();
-        // spikes
-        ctx.save();
-        ctx.globalCompositeOperation = 'lighter';
-        ctx.strokeStyle = `hsla(${hue}, 95%, 70%, ${(0.55+0.35*Math.sin(t*4)).toFixed(3)})`;
-        ctx.lineWidth = 0.9/Math.max(baseScaleX*zoom, baseScaleY*zoom);
-        const spikeR = rWorld * (3.2 + 0.5*Math.sin(t*3.5));
-        const drawSpike = (ang:number)=>{
-          ctx.beginPath();
-          ctx.moveTo(p.x - Math.cos(ang)*spikeR, p.y - Math.sin(ang)*spikeR);
-          ctx.lineTo(p.x + Math.cos(ang)*spikeR, p.y + Math.sin(ang)*spikeR);
-          ctx.stroke();
-        };
-        drawSpike(0); drawSpike(Math.PI/2); drawSpike(Math.PI/4); drawSpike(-Math.PI/4);
-        ctx.restore();
-      }
+    // Single batch path — fastest for 1000s of points.
+    ctx.fillStyle = 'rgba(90,180,220,0.78)';
+    ctx.beginPath();
+    for (const p of pts) {
+      if (p.jname === selected) continue;
+      ctx.moveTo(p.x + rWorld, p.y);
+      ctx.arc(p.x, p.y, rWorld, 0, Math.PI * 2);
     }
+    ctx.fill();
     ctx.restore();
     ctx.restore();
-    needsRedraw.current = false;
-  },[canvasW, canvasH, dpr, pts, pan, zoom, height, selected]);
-
-  // Throttled redraw
-  const scheduleRedraw = useCallback(() => {
-    needsRedraw.current = true;
-    if (drawFrame.current) cancelAnimationFrame(drawFrame.current);
-    drawFrame.current = requestAnimationFrame(() => {
-      const now = performance.now();
-      if (now - lastDrawTime.current >= 16) { // ~60fps cap
-        draw();
-        lastDrawTime.current = now;
-      } else {
-        scheduleRedraw();
-      }
-    });
-  }, [draw]);
+  }, [canvasW, canvasH, dpr, pts, zoom, transform, selected]);
 
-  // Animation loop only for selected items
-  const animationRef = useRef<number>();
+  // --- Overlay: only the selected star. Redraws every frame for the pulse. ---
   useEffect(() => {
-    if (!selected) {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = undefined;
-      }
-      scheduleRedraw(); // Draw once without animation
-      return;
+    const canvas = overlayCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const w = canvasW * dpr;
+    const h = canvasH * dpr;
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
     }
-    
-    const animate = () => {
-      scheduleRedraw();
-      animationRef.current = requestAnimationFrame(animate);
-    };
-    animationRef.current = requestAnimationFrame(animate);
-    
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = undefined;
+
+    let raf = 0;
+    let lastDraw = 0;
+
+    const drawOverlay = (now: number) => {
+      // 60 fps cap.
+      if (now - lastDraw < 16) {
+        raf = requestAnimationFrame(drawOverlay);
+        return;
+      }
+      lastDraw = now;
+
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, canvasW, canvasH);
+
+      if (selected && pts.length) {
+        const p = pts.find(pt => pt.jname === selected);
+        if (p) {
+          const { baseScaleX, baseScaleY, centerX, centerY } = transform;
+          const n = pts.length || 1;
+          const basePx = Math.max(0.8, Math.min(2.0, 12 / Math.sqrt(n)));
+          const basePxAdj = basePx * Math.pow(zoom, 0.1);
+          const pxToWorld = 1 / (baseScaleX * zoom);
+          const targetPx = Math.max(6, basePxAdj * 5.2);
+          const rWorld = targetPx * pxToWorld;
+
+          ctx.translate(centerX, centerY);
+          ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
+
+          const t = now * 0.001;
+          const tw = 0.55 + 0.45 * 0.5 * (Math.sin(t * 5.0) + Math.sin(t * 3.2 + 1.3));
+          const gradOuter = rWorld * (2.6 + 0.3 * Math.sin(t * 2.2));
+          const hue = (t * 40) % 360;
+          const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, gradOuter);
+          grad.addColorStop(0, `hsla(${hue}, 95%, 78%, ${(0.85 * tw).toFixed(3)})`);
+          grad.addColorStop(0.45, `hsla(${(hue + 30) % 360}, 90%, 60%, ${(0.30 * tw).toFixed(3)})`);
+          grad.addColorStop(1, `hsla(${(hue + 60) % 360}, 85%, 40%, 0)`);
+
+          ctx.beginPath();
+          ctx.fillStyle = grad;
+          ctx.arc(p.x, p.y, gradOuter, 0, Math.PI * 2);
+          ctx.fill();
+
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, rWorld * 0.6, 0, Math.PI * 2);
+          ctx.fillStyle = `hsla(${hue}, 95%, 88%, 0.92)`;
+          ctx.fill();
+
+          // Spikes — plain stroke, no compositeOperation 'lighter' (cheaper).
+          ctx.strokeStyle = `hsla(${hue}, 95%, 70%, ${(0.55 + 0.35 * Math.sin(t * 4)).toFixed(3)})`;
+          ctx.lineWidth = 0.9 / Math.max(baseScaleX * zoom, baseScaleY * zoom);
+          const spikeR = rWorld * (3.0 + 0.4 * Math.sin(t * 3.5));
+          const spike = (ang: number) => {
+            ctx.beginPath();
+            ctx.moveTo(p.x - Math.cos(ang) * spikeR, p.y - Math.sin(ang) * spikeR);
+            ctx.lineTo(p.x + Math.cos(ang) * spikeR, p.y + Math.sin(ang) * spikeR);
+            ctx.stroke();
+          };
+          spike(0); spike(Math.PI / 2); spike(Math.PI / 4); spike(-Math.PI / 4);
+        }
       }
+      ctx.restore();
+
+      if (selected) raf = requestAnimationFrame(drawOverlay);
     };
-  }, [selected, scheduleRedraw]);
 
-  // Trigger redraws on data/state changes
-  useEffect(() => scheduleRedraw(), [pts, pan, zoom, canvasW, canvasH, scheduleRedraw]);
+    if (selected) {
+      raf = requestAnimationFrame(drawOverlay);
+    } else {
+      // Clear once when nothing selected.
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, canvasW, canvasH);
+      ctx.restore();
+    }
 
-  // Cleanup
+    return () => { if (raf) cancelAnimationFrame(raf); };
+  }, [selected, pts, transform, canvasW, canvasH, dpr, zoom]);
+
+  // Interaction (attach to overlay canvas — it sits on top).
   useEffect(() => {
-    return () => {
-      if (drawFrame.current) cancelAnimationFrame(drawFrame.current);
-      if (animationRef.current) cancelAnimationFrame(animationRef.current);
-    };
-  }, []);
+    const canvas = overlayCanvasRef.current;
+    if (!canvas) return;
 
-  // Interaction handlers
-  useEffect(()=>{
-    const canvas = canvasRef.current; if(!canvas) return;
-    const onWheel = (e:WheelEvent)=>{
+    const onWheel = (e: WheelEvent) => {
       e.preventDefault();
-      const delta = e.deltaY; // positive => zoom out
-      const zoomFactor = Math.exp(-delta*0.001); // smooth
-      setZoom(z=>{
-        let nz = z*zoomFactor; if(nz<0.4) nz=0.4; if(nz>10) nz=10; return nz;
-      });
+      const zoomFactor = Math.exp(-e.deltaY * 0.001);
+      setZoom(z => Math.max(0.4, Math.min(10, z * zoomFactor)));
     };
-    const onDown = (e:PointerEvent)=>{
+    const onDown = (e: PointerEvent) => {
       isPanningRef.current = true;
-      lastPosRef.current = {x:e.clientX, y:e.clientY};
+      lastPosRef.current = { x: e.clientX, y: e.clientY };
       canvas.setPointerCapture(e.pointerId);
     };
-    const onMove = (e:PointerEvent)=>{
-      if(!isPanningRef.current) return;
+    const onMove = (e: PointerEvent) => {
+      if (!isPanningRef.current) return;
       const dx = e.clientX - lastPosRef.current.x;
       const dy = e.clientY - lastPosRef.current.y;
-      lastPosRef.current = {x:e.clientX, y:e.clientY};
-      setPan(p=> ({x: p.x + dx, y: p.y + dy}));
+      lastPosRef.current = { x: e.clientX, y: e.clientY };
+      setPan(p => ({ x: p.x + dx, y: p.y + dy }));
     };
-    const onUp = (e:PointerEvent)=>{
+    const onUp = (e: PointerEvent) => {
       isPanningRef.current = false;
       canvas.releasePointerCapture(e.pointerId);
     };
-    const onDbl = ()=>{ setZoom(1); setPan({x:0,y:0}); };
-    const onClick = (e:MouseEvent)=>{
-      // hit test nearest point within 8px
+    const onDbl = () => { setZoom(1); setPan({ x: 0, y: 0 }); };
+    const onClick = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      const x = (e.clientX - rect.left);
-      const y = (e.clientY - rect.top);
-      // Convert each point to screen
-      const innerW = canvasW - padding*2;
-      const innerH = canvasH - padding*2;
-      const baseScaleX = innerW / (maxX*2);
-      const baseScaleY = innerH / (maxY*2);
-      const centerX = canvasW/2 + pan.x;
-      const centerY = canvasH/2 + pan.y;
-      let best:any = null; let bestD = 9e9;
-      for(const p of pts){
-        const sx = centerX + (p.x * baseScaleX*zoom);
-        const sy = centerY + (p.y * baseScaleY*zoom);
-        const dx = sx - x; const dy = sy - y; const dist = Math.sqrt(dx*dx+dy*dy);
-        if(dist < 8 && dist < bestD){ bestD = dist; best = p; }
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const { baseScaleX, baseScaleY, centerX, centerY } = transform;
+      let best: ProjectedPoint | null = null;
+      let bestD = 9e9;
+      for (const p of pts) {
+        const sx = centerX + p.x * baseScaleX * zoom;
+        const sy = centerY + p.y * baseScaleY * zoom;
+        const dx = sx - x; const dy = sy - y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 8 && dist < bestD) { bestD = dist; best = p; }
       }
-      if(best){ onSelect(best.jname); }
+      if (best) onSelect(best.jname);
     };
-    canvas.addEventListener('wheel', onWheel, { passive:false });
+
+    canvas.addEventListener('wheel', onWheel, { passive: false });
     canvas.addEventListener('pointerdown', onDown);
     canvas.addEventListener('pointermove', onMove);
     canvas.addEventListener('pointerup', onUp);
     canvas.addEventListener('pointerleave', onUp);
     canvas.addEventListener('dblclick', onDbl);
     canvas.addEventListener('click', onClick);
-    return ()=>{
-      canvas.removeEventListener('wheel', onWheel as any);
-      canvas.removeEventListener('pointerdown', onDown as any);
-      canvas.removeEventListener('pointermove', onMove as any);
-      canvas.removeEventListener('pointerup', onUp as any);
-      canvas.removeEventListener('pointerleave', onUp as any);
-      canvas.removeEventListener('dblclick', onDbl as any);
-      canvas.removeEventListener('click', onClick as any);
+    return () => {
+      canvas.removeEventListener('wheel', onWheel);
+      canvas.removeEventListener('pointerdown', onDown);
+      canvas.removeEventListener('pointermove', onMove);
+      canvas.removeEventListener('pointerup', onUp);
+      canvas.removeEventListener('pointerleave', onUp);
+      canvas.removeEventListener('dblclick', onDbl);
+      canvas.removeEventListener('click', onClick);
     };
-  },[canvasW, canvasH, pts, pan, zoom, onSelect]);
+  }, [pts, transform, zoom, onSelect]);
+
+  const onZoomIn = useCallback(() => setZoom(z => Math.min(z * 1.25, 10)), []);
+  const onZoomOut = useCallback(() => setZoom(z => Math.max(z / 1.25, 0.4)), []);
+  const onReset = useCallback(() => { setZoom(1); setPan({ x: 0, y: 0 }); }, []);
 
   return (
-  <Paper sx={{ p:1, height, minHeight:{ xs:240, sm:height }, position:'relative', background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.05)', backdropFilter:'blur(4px)', display:'flex', flexDirection:'column' }}>
-      <Typography variant="caption" sx={{ pl:1, fontWeight:600, letterSpacing:0.5, mb:0.5 }}>
+    <Paper sx={{ p: 1, height, minHeight: { xs: 240, sm: height }, position: 'relative', display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="caption" sx={{ pl: 1, fontWeight: 600, letterSpacing: 0.5, mb: 0.5 }}>
         Sky — {pts.length} pts | zoom {zoom.toFixed(2)} {isProjecting && '(projecting...)'}
       </Typography>
-      <div ref={containerRef} style={{ flex:1, position:'relative' }}>
-        <canvas ref={canvasRef} style={{ width:'100%', height:'100%', display:'block', cursor: isPanningRef.current? 'grabbing':'grab' }} />
-        {(!pts.length && !isProjecting) && (
-          <Typography variant="caption" sx={{ position:'absolute', top:'50%', left:0, width:'100%', textAlign:'center', transform:'translateY(-50%)', color:'text.secondary' }}>No RA/DEC available to plot.</Typography>
+      <div ref={containerRef} style={{ flex: 1, position: 'relative' }}>
+        <canvas
+          ref={baseCanvasRef}
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
+        />
+        <canvas
+          ref={overlayCanvasRef}
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', cursor: isPanningRef.current ? 'grabbing' : 'grab' }}
+        />
+        {!pts.length && !isProjecting && (
+          <Typography variant="caption" sx={{ position: 'absolute', top: '50%', left: 0, width: '100%', textAlign: 'center', transform: 'translateY(-50%)', color: 'text.secondary' }}>No RA/DEC available to plot.</Typography>
         )}
         {isProjecting && (
-          <Typography variant="caption" sx={{ position:'absolute', top:'50%', left:0, width:'100%', textAlign:'center', transform:'translateY(-50%)', color:'text.secondary' }}>Projecting objects...</Typography>
+          <Typography variant="caption" sx={{ position: 'absolute', top: '50%', left: 0, width: '100%', textAlign: 'center', transform: 'translateY(-50%)', color: 'text.secondary' }}>Projecting objects...</Typography>
         )}
-        <div style={{ position:'absolute', right:8, bottom:18, display:'flex', flexDirection:'column', gap:4 }}>
-          <button style={{ fontSize:11, padding:'2px 6px', background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.15)', color:'#fff', borderRadius:4, cursor:'pointer' }} onClick={()=> setZoom(z=> Math.min(z*1.25,10))}>＋</button>
-          <button style={{ fontSize:11, padding:'2px 6px', background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.15)', color:'#fff', borderRadius:4, cursor:'pointer' }} onClick={()=> setZoom(z=> Math.max(z/1.25,0.4))}>－</button>
-          <button style={{ fontSize:10, padding:'2px 4px', background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.15)', color:'#fff', borderRadius:4, cursor:'pointer' }} onClick={()=> { setZoom(1); setPan({x:0,y:0}); }}>reset</button>
+        <div style={{ position: 'absolute', right: 8, bottom: 18, display: 'flex', flexDirection: 'column', gap: 4, zIndex: 1 }}>
+          <button style={{ fontSize: 11, padding: '2px 6px', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', borderRadius: 4, cursor: 'pointer' }} onClick={onZoomIn}>＋</button>
+          <button style={{ fontSize: 11, padding: '2px 6px', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', borderRadius: 4, cursor: 'pointer' }} onClick={onZoomOut}>－</button>
+          <button style={{ fontSize: 10, padding: '2px 4px', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', borderRadius: 4, cursor: 'pointer' }} onClick={onReset}>reset</button>
         </div>
       </div>
     </Paper>
@@ -584,10 +496,3 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height=360, width=600, o
 });
 
 SkyMap.displayName = 'SkyMap';
-
-// Cleanup worker on component unmount
-if (typeof window !== 'undefined') {
-  window.addEventListener('beforeunload', () => {
-    workerInstance.destroy();
-  });
-}
diff --git a/dashboard/src/components/VirtualizedList.tsx b/dashboard/src/components/VirtualizedList.tsx
index fad26a4..1f6380a 100644
--- a/dashboard/src/components/VirtualizedList.tsx
+++ b/dashboard/src/components/VirtualizedList.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState, useCallback, useEffect, useRef } from 'react';
 
 interface VirtualizedListProps<T = unknown> {
   items: T[];
@@ -6,6 +6,8 @@ interface VirtualizedListProps<T = unknown> {
   itemHeight: number;
   containerHeight: number;
   overscan?: number;
+  scrollToIndex?: number;
+  itemKey?: (item: T, index: number) => React.Key;
 }
 
 const VirtualizedListInner = <T,>({
@@ -13,9 +15,12 @@ const VirtualizedListInner = <T,>({
   renderItem,
   itemHeight,
   containerHeight,
-  overscan = 5
+  overscan = 5,
+  scrollToIndex,
+  itemKey
 }: VirtualizedListProps<T>) => {
-  const [scrollTop, setScrollTop] = React.useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const visibleIndices = useMemo(() => {
     const startIndex = Math.floor(scrollTop / itemHeight);
@@ -23,58 +28,59 @@ const VirtualizedListInner = <T,>({
       startIndex + Math.ceil(containerHeight / itemHeight),
       items.length - 1
     );
-
     const start = Math.max(0, startIndex - overscan);
     const end = Math.min(items.length - 1, endIndex + overscan);
-
     return { start, end };
   }, [scrollTop, itemHeight, containerHeight, items.length, overscan]);
 
-  const visibleItems = useMemo(() => {
-    const { start, end } = visibleIndices;
-    return items.slice(start, end + 1).map((item, index) => ({
-      item,
-      index: start + index
-    }));
-  }, [items, visibleIndices]);
-
-  const handleScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
 
-  const totalHeight = items.length * itemHeight;
+  // Bring scrollToIndex into view if outside the visible range.
+  useEffect(() => {
+    if (scrollToIndex == null || scrollToIndex < 0) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const top = scrollToIndex * itemHeight;
+    const bottom = top + itemHeight;
+    const viewTop = el.scrollTop;
+    const viewBottom = viewTop + containerHeight;
+    if (top < viewTop) {
+      el.scrollTop = top;
+    } else if (bottom > viewBottom) {
+      el.scrollTop = bottom - containerHeight;
+    }
+  }, [scrollToIndex, itemHeight, containerHeight]);
 
-  if (items.length < 20) {
-    // Para listas pequenas, não usar virtualização
-    return (
-      <div style={{ maxHeight: containerHeight, overflowY: 'auto' }}>
-        {items.map((item, index) => renderItem(item, index))}
-      </div>
-    );
-  }
+  const totalHeight = items.length * itemHeight;
+  const { start, end } = visibleIndices;
 
   return (
     <div
-      style={{
-        height: containerHeight,
-        overflowY: 'auto',
-        position: 'relative'
-      }}
+      ref={containerRef}
+      style={{ height: containerHeight, overflowY: 'auto', position: 'relative' }}
       onScroll={handleScroll}
     >
       <div style={{ height: totalHeight, position: 'relative' }}>
         <div
           style={{
-            transform: `translateY(${visibleIndices.start * itemHeight}px)`,
+            transform: `translateY(${start * itemHeight}px)`,
             position: 'absolute',
             top: 0,
             left: 0,
             right: 0
           }}
         >
-          {visibleItems.map(({ item, index }) =>
-            renderItem(item, index)
-          )}
+          {items.slice(start, end + 1).map((item, i) => {
+            const idx = start + i;
+            const key = itemKey ? itemKey(item, idx) : idx;
+            return (
+              <div key={key} style={{ height: itemHeight }}>
+                {renderItem(item, idx)}
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>
diff --git a/dashboard/src/theme.ts b/dashboard/src/theme.ts
index bc4032f..a99d611 100644
--- a/dashboard/src/theme.ts
+++ b/dashboard/src/theme.ts
@@ -2,14 +2,16 @@ import { createTheme, alpha } from '@mui/material/styles';
 
 const customShadows = [
   'none',
-  '0 2px 4px -2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02)',
-  '0 4px 12px -2px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02)',
-  '0 6px 18px -4px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.025)',
-  '0 10px 28px -6px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.025)',
+  '0 2px 4px -2px rgba(0,0,0,0.6)',
+  '0 4px 12px -2px rgba(0,0,0,0.65)',
+  '0 6px 18px -4px rgba(0,0,0,0.65)',
+  '0 10px 28px -6px rgba(0,0,0,0.7)',
   ...Array(20).fill('0 0 0 1px rgba(0,0,0,0.4)') as string[]
 ] as const;
 
-// "Liquid glass" deep space theme (keeps export name to avoid ref changes)
+// Solid (non-translucent) deep space theme — keeps the dark/aqua look but
+// avoids backdrop-filter / saturate filters everywhere, which were the main
+// source of GPU/RAM pressure and laggy scroll.
 export const darkAquaTheme = createTheme({
   palette: {
     mode: 'dark',
@@ -20,13 +22,13 @@ export const darkAquaTheme = createTheme({
     error: { main: '#ff4d67' },
     warning: { main: '#ffb347' },
     background: {
-      default: '#03060a', // near-black
-      paper: 'rgba(16,26,40,0.55)'
+      default: '#03060a',
+      paper: '#101a28'
     },
     divider: 'rgba(255,255,255,0.08)',
     text: {
       primary: '#e6f7ff',
-      secondary: alpha('#e6f7ff', 0.55)
+      secondary: alpha('#e6f7ff', 0.6)
     }
   },
   shape: { borderRadius: 14 },
@@ -41,30 +43,11 @@ export const darkAquaTheme = createTheme({
       styleOverrides: () => ({
         body: {
           backgroundColor: '#03060a',
-          backgroundImage: [
-            'radial-gradient(circle at 20% 15%, rgba(0,200,255,0.09), rgba(0,0,0,0) 45%)',
-            'radial-gradient(circle at 80% 75%, rgba(120,60,255,0.10), rgba(0,0,0,0) 50%)',
-            'linear-gradient(135deg, #020409 0%, #040b14 45%, #020409 100%)'
-          ].join(','),
-          backgroundAttachment: 'fixed',
+          // Single static gradient — no fixed attachment, no radial overlays.
+          backgroundImage: 'linear-gradient(135deg, #04080d 0%, #061018 50%, #04080d 100%)',
           overscrollBehavior: 'none',
           WebkitFontSmoothing: 'antialiased'
         },
-        '.MuiDataGrid-root': {
-          background: 'rgba(8,14,20,0.25)',
-          border: '1px solid rgba(255,255,255,0.05)',
-          backdropFilter: 'blur(10px) saturate(140%)',
-          WebkitBackdropFilter: 'blur(10px) saturate(140%)'
-        },
-        '.MuiDataGrid-columnHeaders': {
-          background: 'linear-gradient(90deg, rgba(16,28,40,0.65), rgba(10,18,26,0.55))',
-          backdropFilter: 'blur(12px)',
-          WebkitBackdropFilter: 'blur(12px)'
-        },
-        '.MuiDataGrid-row:nth-of-type(even) .MuiDataGrid-cell': {
-          backgroundColor: 'rgba(255,255,255,0.015)'
-        },
-        '.MuiDataGrid-cell': { borderBottom: '1px solid rgba(255,255,255,0.04)' },
         '*::selection': { background: alpha('#00d8ff', 0.25) },
         '::-webkit-scrollbar': { width: 10, height: 10 },
         '::-webkit-scrollbar-track': { background: 'rgba(255,255,255,0.03)' },
@@ -79,32 +62,26 @@ export const darkAquaTheme = createTheme({
     MuiPaper: {
       styleOverrides: {
         root: () => ({
-          background: 'linear-gradient(135deg, rgba(25,40,54,0.55) 0%, rgba(14,24,34,0.55) 55%)',
-          backdropFilter: 'blur(14px) saturate(160%)',
-          WebkitBackdropFilter: 'blur(14px) saturate(160%)',
-          border: '1px solid rgba(255,255,255,0.06)',
-          boxShadow: '0 4px 28px -6px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02)'
+          background: 'linear-gradient(135deg, #14222e 0%, #0d1820 60%, #0a141c 100%)',
+          border: '1px solid rgba(255,255,255,0.05)',
+          boxShadow: '0 4px 28px -10px rgba(0,0,0,0.7)'
         })
       }
     },
     MuiAppBar: {
       styleOverrides: {
         root: {
-          background: 'linear-gradient(90deg, rgba(5,12,18,0.85) 0%, rgba(12,20,28,0.55) 55%, rgba(5,12,18,0.85))',
-          backdropFilter: 'blur(18px) saturate(180%)',
-          WebkitBackdropFilter: 'blur(18px) saturate(180%)',
-          borderBottom: '1px solid rgba(255,255,255,0.08)',
-          boxShadow: '0 2px 20px -4px rgba(0,0,0,0.7)'
+          background: 'linear-gradient(90deg, #06101a 0%, #0a1622 55%, #06101a 100%)',
+          borderBottom: '1px solid rgba(255,255,255,0.07)',
+          boxShadow: '0 2px 16px -6px rgba(0,0,0,0.7)'
         }
       }
     },
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          background: 'linear-gradient(180deg, rgba(10,18,26,0.85), rgba(6,12,18,0.90))',
-          backdropFilter: 'blur(16px) saturate(160%)',
-          WebkitBackdropFilter: 'blur(16px) saturate(160%)',
-          borderRight: '1px solid rgba(255,255,255,0.08)'
+          background: 'linear-gradient(180deg, #0c1620 0%, #08111a 100%)',
+          borderRight: '1px solid rgba(255,255,255,0.07)'
         }
       }
     },
@@ -113,25 +90,21 @@ export const darkAquaTheme = createTheme({
         root: {
           borderRadius: 10,
           fontWeight: 500,
-          letterSpacing: 0.4,
-          position: 'relative',
-          overflow: 'hidden'
+          letterSpacing: 0.4
         },
         containedPrimary: {
           background: 'linear-gradient(135deg,#00d8ff,#0087ff)',
-          boxShadow: '0 4px 16px -4px rgba(0,180,255,0.55), 0 0 0 1px rgba(0,216,255,0.25)',
+          boxShadow: '0 4px 12px -4px rgba(0,180,255,0.55)',
           '&:hover': {
-            background: 'linear-gradient(135deg,#34e4ff,#0096ff)',
-            boxShadow: '0 4px 20px -4px rgba(0,160,255,0.65), 0 0 0 1px rgba(0,216,255,0.35)'
+            background: 'linear-gradient(135deg,#34e4ff,#0096ff)'
           }
         }
       }
     },
     MuiTabs: { styleOverrides: { indicator: { height: 3, borderRadius: 3 } } },
     MuiTab: { styleOverrides: { root: { textTransform: 'none', fontWeight: 500 } } },
-    MuiTooltip: { styleOverrides: { tooltip: { backdropFilter: 'blur(10px)', background: 'rgba(25,35,45,0.85)', border: '1px solid rgba(255,255,255,0.08)', fontSize: 12 } } },
+    MuiTooltip: { styleOverrides: { tooltip: { background: '#1a2530', border: '1px solid rgba(255,255,255,0.08)', fontSize: 12 } } },
     MuiDivider: { styleOverrides: { root: { borderColor: 'rgba(255,255,255,0.06)' } } },
-    MuiTextField: { styleOverrides: { root: { '& .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.15)' } } } },
-  // DataGrid customização via CssBaseline (classes globais)
+    MuiTextField: { styleOverrides: { root: { '& .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.15)' } } } }
   }
 });
diff --git a/dashboard/src/workers/skyProjectionWorker.ts b/dashboard/src/workers/skyProjectionWorker.ts
index 33b2e11..3d3d775 100644
--- a/dashboard/src/workers/skyProjectionWorker.ts
+++ b/dashboard/src/workers/skyProjectionWorker.ts
@@ -1,5 +1,5 @@
-// Web Worker for sky projection calculations
-// This offloads the heavy Mollweide projection computation from the main thread
+// Web Worker for sky projection calculations.
+// Offloads the Mollweide projection from the main thread.
 
 interface SkyObject {
   JNAME: string;
@@ -16,20 +16,15 @@ interface ProjectedPoint {
   dec: number;
 }
 
-// Convert RA (deg 0..360) to Mollweide longitude λ (deg -180..180)
 const raToLon = (raDeg: number) => {
   const wrapped = ((raDeg + 180) % 360) - 180;
   return -wrapped;
 };
-
 const deg2rad = (d: number) => d * Math.PI / 180;
 
-// Solve for theta in Mollweide projection: 2θ + sin 2θ = π sin φ
 function solveTheta(phi: number) {
   const HALF_PI = Math.PI / 2;
-  if (Math.abs(Math.abs(phi) - HALF_PI) < 1e-12) {
-    return Math.sign(phi) * HALF_PI;
-  }
+  if (Math.abs(Math.abs(phi) - HALF_PI) < 1e-12) return Math.sign(phi) * HALF_PI;
   let theta = Math.max(-HALF_PI, Math.min(HALF_PI, phi));
   for (let i = 0; i < 12; i++) {
     const f = 2 * theta + Math.sin(2 * theta) - Math.PI * Math.sin(phi);
@@ -42,49 +37,36 @@ function solveTheta(phi: number) {
   return theta;
 }
 
-// Project objects to Mollweide coordinates
+const toNum = (v: unknown): number =>
+  typeof v === 'number' ? v : typeof v === 'string' ? parseFloat(v) : NaN;
+
 function projectObjects(objects: SkyObject[]): ProjectedPoint[] {
   const result: ProjectedPoint[] = [];
-  
   for (const o of objects) {
     if (!o) continue;
-    
-    const toNum = (v: any) => typeof v === 'number' ? v : (typeof v === 'string' ? parseFloat(v) : NaN);
     let RA = toNum(o.RA);
     let DEC = toNum(o.DEC);
-    
     if (isNaN(RA) || isNaN(DEC)) continue;
     if (RA < 0) RA = ((RA % 360) + 360) % 360;
     if (RA >= 360) RA = RA % 360;
     if (DEC < -90 || DEC > 90) continue;
-    
     const lon = deg2rad(raToLon(RA));
     const lat = deg2rad(DEC);
     const theta = solveTheta(lat);
     const xNorm = (2 * Math.SQRT2 / Math.PI) * lon * Math.cos(theta);
     const yNorm = -Math.SQRT2 * Math.sin(theta);
-    
     result.push({ x: xNorm, y: yNorm, jname: o.JNAME, ra: RA, dec: DEC });
   }
-  
   return result;
 }
 
-// Listen for messages from main thread
-self.onmessage = function(e) {
-  const { objects, requestId } = e.data;
-  
+self.onmessage = (e: MessageEvent) => {
+  const { objects, requestId } = e.data as { objects: SkyObject[]; requestId: number };
   try {
     const projectedPoints = projectObjects(objects);
-    
-    // Send result back to main thread
-    self.postMessage({
-      requestId,
-      projectedPoints,
-      success: true
-    });
+    (self as unknown as Worker).postMessage({ requestId, projectedPoints, success: true });
   } catch (error) {
-    self.postMessage({
+    (self as unknown as Worker).postMessage({
       requestId,
       error: error instanceof Error ? error.message : 'Unknown error',
       success: false
@@ -92,4 +74,4 @@ self.onmessage = function(e) {
   }
 };
 
-export {}; // Make this a module
+export {};

From 1a04f2e45402326a057e81fe9651aa3b2f3094a8 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Sun, 26 Apr 2026 23:38:46 -0300
Subject: [PATCH 6/8] fix: resolve pandas assignment issue with scalar
 accessors

- update assignment method to use `.at[]` for scalar access
- ensure compatibility with pandas >= 2.x to avoid errors
---
 dashboard/prepare_data.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/dashboard/prepare_data.py b/dashboard/prepare_data.py
index 6093623..8a09fa5 100644
--- a/dashboard/prepare_data.py
+++ b/dashboard/prepare_data.py
@@ -251,7 +251,11 @@ def get_proper_values_scalar(item):
     reference = len(entry.Reference[0])
     for column in values:
         if bool(pd.isna(entry[column])[0]):
-            entry.loc[0, column] = np.repeat(np.nan, reference)
+            # `.at[]` (scalar accessor) accepts storing the list as the cell
+            # value; `.loc[0, column] = <iterable>` raises in pandas >= 2.x
+            # ("Must have equal len keys and value when setting with an iterable").
+            entry[column] = entry[column].astype(object)
+            entry.at[0, column] = [np.nan] * reference
     df_new = pd.concat([df_new, entry], axis=0).reset_index(drop=True)
 
 df_new = df_new.drop(columns=["multiple"])

From d58b6418c255e25b8fe286f5f0364364edb26455 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Mon, 27 Apr 2026 00:05:37 -0300
Subject: [PATCH 7/8] fix: address Copilot/CodeRabbit review feedback

- SkyMap WorkerPool: handle worker error replies (success:false) by
  falling back to main-thread immediately, and clear per-request
  setTimeout on success
- SkyMap: stable interaction listeners via refs (transform/pts/zoom/
  onSelect) so they aren't reattached on every pan
- SkyMap: cache selected point via Map<jname, ProjectedPoint> so the
  overlay rAF loop is O(1) per frame instead of pts.find
- SkyMap: HMR-safe beforeunload via import.meta.hot.dispose
- DataTables: derive columns from union of keys across rows, clamp page
  on row-count shrink
- VirtualizedList: ignore scrollToIndex when >= items.length
- api.ts: timedOut flag distinguishes 30s timeout from external aborts;
  DEBUG_CUTOUTS only accepts explicit "true"/"1"
- skyProjectionWorker: proper DedicatedWorkerGlobalScope typing
  (tsconfig lib += "WebWorker")
- App.tsx: drop unsafe `as unknown as` cast on NUMERIC_FIELDS via
  `satisfies readonly NumericFilterConfig[]`
- FiltersDrawer: numericFields prop is now readonly

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 dashboard/src/App.tsx                        |   6 +-
 dashboard/src/api.ts                         |   9 +-
 dashboard/src/components/DataTables.tsx      |  17 +-
 dashboard/src/components/FiltersDrawer.tsx   |   2 +-
 dashboard/src/components/SkyMap.tsx          | 169 ++++++++++++-------
 dashboard/src/components/VirtualizedList.tsx |   7 +-
 dashboard/src/workers/skyProjectionWorker.ts |   6 +-
 dashboard/tsconfig.json                      |   2 +-
 8 files changed, 139 insertions(+), 79 deletions(-)

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 7216870..e87d17a 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -6,7 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 import { loadDatabase, loadConsolidated, loadDictionary, loadCutouts } from './api';
 const DataTables = lazy(() => import('./components/DataTables').then(m => ({ default: m.DataTables })));
 const CutoutGrid = lazy(() => import('./components/CutoutGrid').then(m => ({ default: m.CutoutGrid })));
-import { FiltersDrawer, FiltersState } from './components/FiltersDrawer';
+import { FiltersDrawer, FiltersState, NumericFilterConfig } from './components/FiltersDrawer';
 import { ObjectsTable } from './components/ObjectsTable';
 import { SkyMap } from './components/SkyMap';
 import { useDebounce } from './hooks/useDebounce';
@@ -26,7 +26,7 @@ const NUMERIC_FIELDS = [
   { key: 'DEC', label: 'DEC' },
   { key: 'z_L', label: 'z_L' },
   { key: 'z_S', label: 'z_S' }
-] as const;
+] as const satisfies readonly NumericFilterConfig[];
 
 const EMPTY_FILTERS: FiltersState = { jnameSearch: '', references: [], numeric: {} };
 
@@ -336,7 +336,7 @@ const App: React.FC = () => {
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
         allReferences={allReferences}
-        numericFields={NUMERIC_FIELDS as unknown as { key: string; label: string }[]}
+        numericFields={NUMERIC_FIELDS}
         domain={domain}
         value={filters}
         onChange={setFilters}
diff --git a/dashboard/src/api.ts b/dashboard/src/api.ts
index c3f6db9..0c6e7b6 100644
--- a/dashboard/src/api.ts
+++ b/dashboard/src/api.ts
@@ -13,7 +13,8 @@ const buildDataUrl = (file: string) => {
 async function fetchJson<T>(file: string): Promise<T> {
   const url = buildDataUrl(file);
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 30000);
+  let timedOut = false;
+  const timeoutId = setTimeout(() => { timedOut = true; controller.abort(); }, 30000);
 
   try {
     const res = await fetch(url, { signal: controller.signal, headers: { Accept: 'application/json' } });
@@ -23,7 +24,7 @@ async function fetchJson<T>(file: string): Promise<T> {
     }
     return await res.json();
   } catch (err) {
-    if (err instanceof Error && err.name === 'AbortError') {
+    if (err instanceof Error && err.name === 'AbortError' && timedOut) {
       throw new Error(`Request timeout for ${url}`);
     }
     throw err;
@@ -46,7 +47,9 @@ export const loadCutouts = (): Promise<CutoutRecord[]> => fetchJson<CutoutRecord
 const env = (import.meta as { env?: Record<string, string> }).env || {};
 const RAW_ENDPOINT: string | undefined = env.VITE_MINIO_ENDPOINT;
 const ENDPOINT_SCHEME: string = (env.VITE_MINIO_SCHEME || 'https').replace(/:$/, '');
-const DEBUG_CUTOUTS = !!env.VITE_DEBUG_CUTOUTS;
+// VITE_* env vars come through as strings — `!!env.VITE_DEBUG_CUTOUTS` would
+// treat "false" as truthy. Accept only an explicit opt-in.
+const DEBUG_CUTOUTS = ['true', '1'].includes((env.VITE_DEBUG_CUTOUTS || '').trim().toLowerCase());
 
 export const buildCutoutUrl = (objectKey: string): string => {
   const cleaned = objectKey.trim().replace(/^\/+/, '');
diff --git a/dashboard/src/components/DataTables.tsx b/dashboard/src/components/DataTables.tsx
index 97a3d6e..510672f 100644
--- a/dashboard/src/components/DataTables.tsx
+++ b/dashboard/src/components/DataTables.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, Typography } from '@mui/material';
 import type { DataRecord, ConsolidatedRecord } from '../types';
 
@@ -24,12 +24,23 @@ const SimpleTable: React.FC<SimpleTableProps> = ({ rows }) => {
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(50);
 
+  // Union of keys across all rows (heterogeneous rows can introduce columns
+  // not present on the first one). Then drop columns that are empty everywhere.
   const columns = useMemo(() => {
     if (rows.length === 0) return [] as string[];
-    const keys = Object.keys(rows[0]).filter(k => k !== 'id');
-    return keys.filter(k => !rows.every(r => isEmptyVal(r[k])));
+    const keySet = new Set<string>();
+    for (const r of rows) {
+      for (const k of Object.keys(r)) if (k !== 'id') keySet.add(k);
+    }
+    return Array.from(keySet).filter(k => !rows.every(r => isEmptyVal(r[k])));
   }, [rows]);
 
+  // Clamp `page` whenever `rows` shrinks past the current page.
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(rows.length / pageSize) - 1);
+    if (page > lastPage) setPage(lastPage);
+  }, [rows.length, pageSize, page]);
+
   const pageRows = useMemo(() => {
     const start = page * pageSize;
     return rows.slice(start, start + pageSize);
diff --git a/dashboard/src/components/FiltersDrawer.tsx b/dashboard/src/components/FiltersDrawer.tsx
index 8b1d636..9df2506 100644
--- a/dashboard/src/components/FiltersDrawer.tsx
+++ b/dashboard/src/components/FiltersDrawer.tsx
@@ -19,7 +19,7 @@ interface Props {
   open: boolean;
   onClose: () => void;
   allReferences: string[];
-  numericFields: NumericFilterConfig[];
+  numericFields: readonly NumericFilterConfig[];
   domain: Record<string, { min: number; max: number }>; // key -> domain
   value: FiltersState;
   onChange: (v: FiltersState) => void;
diff --git a/dashboard/src/components/SkyMap.tsx b/dashboard/src/components/SkyMap.tsx
index 172b8f4..a2c9cc7 100644
--- a/dashboard/src/components/SkyMap.tsx
+++ b/dashboard/src/components/SkyMap.tsx
@@ -72,21 +72,30 @@ function projectMainThread(objects: SkyObject[]): ProjectedPoint[] {
 }
 
 // --- Worker singleton (typed module worker via Vite's ?worker import) ---
+interface PendingRequest {
+  resolve: (r: ProjectedPoint[]) => void;
+  objects: SkyObject[];
+  timeoutId: ReturnType<typeof setTimeout>;
+}
+
 class WorkerPool {
   private worker: Worker | null = null;
   private nextId = 0;
-  private pending = new Map<number, (r: ProjectedPoint[]) => void>();
+  private pending = new Map<number, PendingRequest>();
 
   constructor() {
     try {
       this.worker = new SkyProjectionWorker();
       this.worker.onmessage = (e: MessageEvent) => {
         const { requestId, projectedPoints, success } = e.data || {};
-        const cb = this.pending.get(requestId);
-        if (cb && success) {
-          cb(projectedPoints);
-          this.pending.delete(requestId);
-        }
+        const req = this.pending.get(requestId);
+        if (!req) return;
+        clearTimeout(req.timeoutId);
+        this.pending.delete(requestId);
+        // On worker error, fall back immediately to main-thread projection
+        // rather than letting the request hang until the timeout fires.
+        if (success) req.resolve(projectedPoints);
+        else req.resolve(projectMainThread(req.objects));
       };
     } catch {
       this.worker = null;
@@ -99,28 +108,38 @@ class WorkerPool {
     }
     return new Promise((resolve) => {
       const id = ++this.nextId;
-      this.pending.set(id, resolve);
-      this.worker!.postMessage({ objects, requestId: id });
-      // Generous timeout — large datasets can legitimately take a few seconds.
-      setTimeout(() => {
+      const timeoutId = setTimeout(() => {
         if (this.pending.has(id)) {
           this.pending.delete(id);
           resolve(projectMainThread(objects));
         }
       }, 15000);
+      this.pending.set(id, { resolve, objects, timeoutId });
+      this.worker!.postMessage({ objects, requestId: id });
     });
   }
 
   destroy() {
     this.worker?.terminate();
     this.worker = null;
+    for (const req of this.pending.values()) clearTimeout(req.timeoutId);
     this.pending.clear();
   }
 }
 
 const workerPool = new WorkerPool();
+
+// Wrap the unload listener so HMR can replace it cleanly without leaving
+// duplicates registered or terminating the worker mid-update.
 if (typeof window !== 'undefined') {
-  window.addEventListener('beforeunload', () => workerPool.destroy());
+  const handleBeforeUnload = () => workerPool.destroy();
+  window.addEventListener('beforeunload', handleBeforeUnload);
+  if (import.meta.hot) {
+    import.meta.hot.dispose(() => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      workerPool.destroy();
+    });
+  }
 }
 
 export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 600, onSelect, selected }) => {
@@ -179,6 +198,30 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
     };
   }, [canvasW, canvasH, pan.x, pan.y]);
 
+  // Index pts by JNAME so the overlay's per-frame lookup is O(1).
+  const pointByJname = useMemo(() => {
+    const m = new Map<string, ProjectedPoint>();
+    for (const p of pts) m.set(p.jname, p);
+    return m;
+  }, [pts]);
+  const selectedPoint = useMemo(
+    () => (selected ? pointByJname.get(selected) : undefined),
+    [selected, pointByJname]
+  );
+
+  // Refs that mirror volatile state, so the interaction listeners stay
+  // attached for the lifetime of the canvas instead of being torn down/
+  // re-attached on every pan/zoom (each pointermove was previously
+  // recreating all 7 listeners via setPan -> transform -> effect re-run).
+  const transformRef = useRef(transform);
+  const ptsRef = useRef(pts);
+  const zoomRef = useRef(zoom);
+  const onSelectRef = useRef(onSelect);
+  useEffect(() => { transformRef.current = transform; }, [transform]);
+  useEffect(() => { ptsRef.current = pts; }, [pts]);
+  useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+  useEffect(() => { onSelectRef.current = onSelect; }, [onSelect]);
+
   // --- Base layer: grid + non-selected points. Redraws only on data/viewport change. ---
   useEffect(() => {
     const canvas = baseCanvasRef.current;
@@ -335,51 +378,49 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
       ctx.scale(dpr, dpr);
       ctx.clearRect(0, 0, canvasW, canvasH);
 
-      if (selected && pts.length) {
-        const p = pts.find(pt => pt.jname === selected);
-        if (p) {
-          const { baseScaleX, baseScaleY, centerX, centerY } = transform;
-          const n = pts.length || 1;
-          const basePx = Math.max(0.8, Math.min(2.0, 12 / Math.sqrt(n)));
-          const basePxAdj = basePx * Math.pow(zoom, 0.1);
-          const pxToWorld = 1 / (baseScaleX * zoom);
-          const targetPx = Math.max(6, basePxAdj * 5.2);
-          const rWorld = targetPx * pxToWorld;
-
-          ctx.translate(centerX, centerY);
-          ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
-
-          const t = now * 0.001;
-          const tw = 0.55 + 0.45 * 0.5 * (Math.sin(t * 5.0) + Math.sin(t * 3.2 + 1.3));
-          const gradOuter = rWorld * (2.6 + 0.3 * Math.sin(t * 2.2));
-          const hue = (t * 40) % 360;
-          const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, gradOuter);
-          grad.addColorStop(0, `hsla(${hue}, 95%, 78%, ${(0.85 * tw).toFixed(3)})`);
-          grad.addColorStop(0.45, `hsla(${(hue + 30) % 360}, 90%, 60%, ${(0.30 * tw).toFixed(3)})`);
-          grad.addColorStop(1, `hsla(${(hue + 60) % 360}, 85%, 40%, 0)`);
-
+      if (selectedPoint) {
+        const p = selectedPoint;
+        const { baseScaleX, baseScaleY, centerX, centerY } = transform;
+        const n = pts.length || 1;
+        const basePx = Math.max(0.8, Math.min(2.0, 12 / Math.sqrt(n)));
+        const basePxAdj = basePx * Math.pow(zoom, 0.1);
+        const pxToWorld = 1 / (baseScaleX * zoom);
+        const targetPx = Math.max(6, basePxAdj * 5.2);
+        const rWorld = targetPx * pxToWorld;
+
+        ctx.translate(centerX, centerY);
+        ctx.scale(baseScaleX * zoom, baseScaleY * zoom);
+
+        const t = now * 0.001;
+        const tw = 0.55 + 0.45 * 0.5 * (Math.sin(t * 5.0) + Math.sin(t * 3.2 + 1.3));
+        const gradOuter = rWorld * (2.6 + 0.3 * Math.sin(t * 2.2));
+        const hue = (t * 40) % 360;
+        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, gradOuter);
+        grad.addColorStop(0, `hsla(${hue}, 95%, 78%, ${(0.85 * tw).toFixed(3)})`);
+        grad.addColorStop(0.45, `hsla(${(hue + 30) % 360}, 90%, 60%, ${(0.30 * tw).toFixed(3)})`);
+        grad.addColorStop(1, `hsla(${(hue + 60) % 360}, 85%, 40%, 0)`);
+
+        ctx.beginPath();
+        ctx.fillStyle = grad;
+        ctx.arc(p.x, p.y, gradOuter, 0, Math.PI * 2);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, rWorld * 0.6, 0, Math.PI * 2);
+        ctx.fillStyle = `hsla(${hue}, 95%, 88%, 0.92)`;
+        ctx.fill();
+
+        // Spikes — plain stroke, no compositeOperation 'lighter' (cheaper).
+        ctx.strokeStyle = `hsla(${hue}, 95%, 70%, ${(0.55 + 0.35 * Math.sin(t * 4)).toFixed(3)})`;
+        ctx.lineWidth = 0.9 / Math.max(baseScaleX * zoom, baseScaleY * zoom);
+        const spikeR = rWorld * (3.0 + 0.4 * Math.sin(t * 3.5));
+        const spike = (ang: number) => {
           ctx.beginPath();
-          ctx.fillStyle = grad;
-          ctx.arc(p.x, p.y, gradOuter, 0, Math.PI * 2);
-          ctx.fill();
-
-          ctx.beginPath();
-          ctx.arc(p.x, p.y, rWorld * 0.6, 0, Math.PI * 2);
-          ctx.fillStyle = `hsla(${hue}, 95%, 88%, 0.92)`;
-          ctx.fill();
-
-          // Spikes — plain stroke, no compositeOperation 'lighter' (cheaper).
-          ctx.strokeStyle = `hsla(${hue}, 95%, 70%, ${(0.55 + 0.35 * Math.sin(t * 4)).toFixed(3)})`;
-          ctx.lineWidth = 0.9 / Math.max(baseScaleX * zoom, baseScaleY * zoom);
-          const spikeR = rWorld * (3.0 + 0.4 * Math.sin(t * 3.5));
-          const spike = (ang: number) => {
-            ctx.beginPath();
-            ctx.moveTo(p.x - Math.cos(ang) * spikeR, p.y - Math.sin(ang) * spikeR);
-            ctx.lineTo(p.x + Math.cos(ang) * spikeR, p.y + Math.sin(ang) * spikeR);
-            ctx.stroke();
-          };
-          spike(0); spike(Math.PI / 2); spike(Math.PI / 4); spike(-Math.PI / 4);
-        }
+          ctx.moveTo(p.x - Math.cos(ang) * spikeR, p.y - Math.sin(ang) * spikeR);
+          ctx.lineTo(p.x + Math.cos(ang) * spikeR, p.y + Math.sin(ang) * spikeR);
+          ctx.stroke();
+        };
+        spike(0); spike(Math.PI / 2); spike(Math.PI / 4); spike(-Math.PI / 4);
       }
       ctx.restore();
 
@@ -397,9 +438,10 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
     }
 
     return () => { if (raf) cancelAnimationFrame(raf); };
-  }, [selected, pts, transform, canvasW, canvasH, dpr, zoom]);
+  }, [selected, selectedPoint, pts.length, transform, canvasW, canvasH, dpr, zoom]);
 
-  // Interaction (attach to overlay canvas — it sits on top).
+  // Interaction listeners — attached once on mount. Volatile state is read
+  // through the refs above so we don't tear down/reattach on every pan.
   useEffect(() => {
     const canvas = overlayCanvasRef.current;
     if (!canvas) return;
@@ -430,17 +472,18 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
       const rect = canvas.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const { baseScaleX, baseScaleY, centerX, centerY } = transform;
+      const { baseScaleX, baseScaleY, centerX, centerY } = transformRef.current;
+      const z = zoomRef.current;
       let best: ProjectedPoint | null = null;
       let bestD = 9e9;
-      for (const p of pts) {
-        const sx = centerX + p.x * baseScaleX * zoom;
-        const sy = centerY + p.y * baseScaleY * zoom;
+      for (const p of ptsRef.current) {
+        const sx = centerX + p.x * baseScaleX * z;
+        const sy = centerY + p.y * baseScaleY * z;
         const dx = sx - x; const dy = sy - y;
         const dist = Math.sqrt(dx * dx + dy * dy);
         if (dist < 8 && dist < bestD) { bestD = dist; best = p; }
       }
-      if (best) onSelect(best.jname);
+      if (best) onSelectRef.current(best.jname);
     };
 
     canvas.addEventListener('wheel', onWheel, { passive: false });
@@ -459,7 +502,7 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
       canvas.removeEventListener('dblclick', onDbl);
       canvas.removeEventListener('click', onClick);
     };
-  }, [pts, transform, zoom, onSelect]);
+  }, []);
 
   const onZoomIn = useCallback(() => setZoom(z => Math.min(z * 1.25, 10)), []);
   const onZoomOut = useCallback(() => setZoom(z => Math.max(z / 1.25, 0.4)), []);
diff --git a/dashboard/src/components/VirtualizedList.tsx b/dashboard/src/components/VirtualizedList.tsx
index 1f6380a..089e0c4 100644
--- a/dashboard/src/components/VirtualizedList.tsx
+++ b/dashboard/src/components/VirtualizedList.tsx
@@ -37,9 +37,10 @@ const VirtualizedListInner = <T,>({
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
 
-  // Bring scrollToIndex into view if outside the visible range.
+  // Bring scrollToIndex into view if outside the visible range. Stale indexes
+  // (e.g. selection survived a list shrink) are silently ignored.
   useEffect(() => {
-    if (scrollToIndex == null || scrollToIndex < 0) return;
+    if (scrollToIndex == null || scrollToIndex < 0 || scrollToIndex >= items.length) return;
     const el = containerRef.current;
     if (!el) return;
     const top = scrollToIndex * itemHeight;
@@ -51,7 +52,7 @@ const VirtualizedListInner = <T,>({
     } else if (bottom > viewBottom) {
       el.scrollTop = bottom - containerHeight;
     }
-  }, [scrollToIndex, itemHeight, containerHeight]);
+  }, [scrollToIndex, itemHeight, containerHeight, items.length]);
 
   const totalHeight = items.length * itemHeight;
   const { start, end } = visibleIndices;
diff --git a/dashboard/src/workers/skyProjectionWorker.ts b/dashboard/src/workers/skyProjectionWorker.ts
index 3d3d775..42dad41 100644
--- a/dashboard/src/workers/skyProjectionWorker.ts
+++ b/dashboard/src/workers/skyProjectionWorker.ts
@@ -60,13 +60,15 @@ function projectObjects(objects: SkyObject[]): ProjectedPoint[] {
   return result;
 }
 
+declare const self: DedicatedWorkerGlobalScope;
+
 self.onmessage = (e: MessageEvent) => {
   const { objects, requestId } = e.data as { objects: SkyObject[]; requestId: number };
   try {
     const projectedPoints = projectObjects(objects);
-    (self as unknown as Worker).postMessage({ requestId, projectedPoints, success: true });
+    self.postMessage({ requestId, projectedPoints, success: true });
   } catch (error) {
-    (self as unknown as Worker).postMessage({
+    self.postMessage({
       requestId,
       error: error instanceof Error ? error.message : 'Unknown error',
       success: false
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
index 8c69ba7..ca75a5f 100644
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "lib": ["DOM", "DOM.Iterable", "ES2020", "WebWorker"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,

From 8d7efdbbf1e78c14becfe0fe4d6fd5e64efd8c27 Mon Sep 17 00:00:00 2001
From: Renan Alves de Oliveira <fisica.renan@gmail.com>
Date: Mon, 27 Apr 2026 00:23:36 -0300
Subject: [PATCH 8/8] fix: address second review pass

- index.html: restore ws/wss in connect-src so Vite HMR keeps working
  in dev (the meta CSP applies in both dev and prod; for stricter prod
  hardening, drop them via server headers on deploy)
- api.ts: rewrite blobCache comment to honestly describe the
  session-lifetime policy and when an LRU would be warranted
- CutoutGrid: surface broken images via <img onError> + local state.
  getCutoutObject still returns the raw URL on fetch failure (so the
  browser gets a second chance), but if <img> itself fails the card
  now shows the Error placeholder instead of a silent broken image
- VirtualizedList: explicitly setScrollTop(el.scrollTop) after a
  programmatic scroll, instead of relying on the scroll event firing
- SkyMap: stop reading isPanningRef.current from JSX (cursor stayed
  stuck at 'grabbing' since refs don't trigger re-renders). Drive
  cursor via canvas.style.cursor in onDown/onUp, and guard
  releasePointerCapture against not-captured pointers

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 dashboard/index.html                         |  7 ++++++-
 dashboard/src/api.ts                         | 12 ++++++++----
 dashboard/src/components/CutoutGrid.tsx      | 19 ++++++++++++++-----
 dashboard/src/components/SkyMap.tsx          |  6 ++++--
 dashboard/src/components/VirtualizedList.tsx | 14 +++++++++-----
 5 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index 59ddf76..3ec06c1 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -5,7 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="LaStBeRu Explorer - Interactive dashboard for astronomical data exploration" />
     <meta name="author" content="CosmoObs" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' https:; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';" />
+    <!--
+      ws:/wss: are required by Vite HMR in dev. They are also harmless in prod
+      (only same-origin or explicitly-fetched URLs reach the page). For a
+      stricter prod-only policy, set the CSP via server headers and drop them.
+    -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' https: ws: wss:; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';" />
     <title>The LaStBeRu Explorer</title>
     <link rel="icon" type="image/png" href="telescope.png" />
     <style>
diff --git a/dashboard/src/api.ts b/dashboard/src/api.ts
index 0c6e7b6..206eea8 100644
--- a/dashboard/src/api.ts
+++ b/dashboard/src/api.ts
@@ -74,10 +74,14 @@ export const buildCutoutUrl = (objectKey: string): string => {
   return url;
 };
 
-// Cache of blob URLs keyed by source URL. We intentionally do NOT revoke
-// these on component unmount: react-query keeps the URL string in its cache
-// for `staleTime`, and revoking would leave broken images on remount.
-// The map bounds growth — same URL fetched twice reuses the same blob.
+// Cache of blob URLs keyed by source URL. Lifetime is the page session: we
+// intentionally never call URL.revokeObjectURL because react-query keeps the
+// blob URL string in its cache for `staleTime` (and longer for `gcTime`), so
+// revoking on unmount would leave broken images on remount. With typical
+// cutout sizes (~50–200 KB JPEGs) and bounded selections per session this
+// is an acceptable trade. If a session needs to load thousands of unique
+// cutouts, add an LRU here that coordinates revocation with react-query's
+// QueryCache events.
 const blobCache = new Map<string, string>();
 
 export const getCutoutObject = async (objectKey: string): Promise<string | null> => {
diff --git a/dashboard/src/components/CutoutGrid.tsx b/dashboard/src/components/CutoutGrid.tsx
index ee0ad7c..6062fb2 100644
--- a/dashboard/src/components/CutoutGrid.tsx
+++ b/dashboard/src/components/CutoutGrid.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { Box, Grid, Typography, Paper, Skeleton } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { getCutoutObject } from '../api';
@@ -31,35 +31,44 @@ const CutoutCard: React.FC<{ record: CutoutRecord }> = memo(({ record }) => {
   // the module-level cache in api.ts — we deliberately don't revoke on
   // unmount to avoid breaking images that react-query will hand back from
   // its cache when the component remounts.
-  const { data, isLoading, error } = useQuery({
+  const { data, isLoading, error: queryError } = useQuery({
     queryKey: ['cutout', record.file_path],
     queryFn: () => getCutoutObject(record.file_path),
     staleTime: 5 * 60 * 1000,
     retry: 1
   });
 
+  // getCutoutObject swallows fetch errors and falls back to the raw URL so
+  // the <img> still gets a chance (the browser may succeed where fetch failed
+  // due to CORS preflight). If the <img> itself fails to load, surface that
+  // here — otherwise the broken image renders silently.
+  const [imgError, setImgError] = useState(false);
+  React.useEffect(() => { setImgError(false); }, [data]);
+  const showError = !!queryError || imgError;
+
   return (
     <Paper sx={{ p: 1.5, textAlign: 'center' }}>
       <Typography variant="caption" sx={{ fontWeight: 700, letterSpacing: 0.5 }}>{record.band}</Typography>
       <Box mt={1} sx={{ position: 'relative', width: '100%', maxWidth: 160, mx: 'auto' }}>
         <Box sx={{ position: 'relative', width: '100%', pt: '100%', borderRadius: 2, overflow: 'hidden', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(90,170,200,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {isLoading && <Skeleton variant="rectangular" width="100%" height="100%" sx={{ position: 'absolute', inset: 0 }} />}
-          {!isLoading && data && (
+          {!isLoading && data && !imgError && (
             <img
               src={data}
               loading="lazy"
               decoding="async"
               referrerPolicy="no-referrer"
               alt={record.band + ' cutout'}
+              onError={() => setImgError(true)}
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }}
             />
           )}
-          {!isLoading && !data && !error && (
+          {!isLoading && !data && !showError && (
             <Typography variant="caption" color="text.secondary" sx={{ textAlign: 'center', px: 0.5, position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               No image
             </Typography>
           )}
-          {error && (
+          {showError && (
             <Typography variant="caption" color="error" sx={{ textAlign: 'center', px: 0.5, position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               Error
             </Typography>
diff --git a/dashboard/src/components/SkyMap.tsx b/dashboard/src/components/SkyMap.tsx
index a2c9cc7..87915da 100644
--- a/dashboard/src/components/SkyMap.tsx
+++ b/dashboard/src/components/SkyMap.tsx
@@ -455,6 +455,7 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
       isPanningRef.current = true;
       lastPosRef.current = { x: e.clientX, y: e.clientY };
       canvas.setPointerCapture(e.pointerId);
+      canvas.style.cursor = 'grabbing';
     };
     const onMove = (e: PointerEvent) => {
       if (!isPanningRef.current) return;
@@ -465,7 +466,8 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
     };
     const onUp = (e: PointerEvent) => {
       isPanningRef.current = false;
-      canvas.releasePointerCapture(e.pointerId);
+      try { canvas.releasePointerCapture(e.pointerId); } catch { /* not captured */ }
+      canvas.style.cursor = 'grab';
     };
     const onDbl = () => { setZoom(1); setPan({ x: 0, y: 0 }); };
     const onClick = (e: MouseEvent) => {
@@ -520,7 +522,7 @@ export const SkyMap: React.FC<Props> = memo(({ objects, height = 360, width = 60
         />
         <canvas
           ref={overlayCanvasRef}
-          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', cursor: isPanningRef.current ? 'grabbing' : 'grab' }}
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', cursor: 'grab' }}
         />
         {!pts.length && !isProjecting && (
           <Typography variant="caption" sx={{ position: 'absolute', top: '50%', left: 0, width: '100%', textAlign: 'center', transform: 'translateY(-50%)', color: 'text.secondary' }}>No RA/DEC available to plot.</Typography>
diff --git a/dashboard/src/components/VirtualizedList.tsx b/dashboard/src/components/VirtualizedList.tsx
index 089e0c4..fb06584 100644
--- a/dashboard/src/components/VirtualizedList.tsx
+++ b/dashboard/src/components/VirtualizedList.tsx
@@ -38,7 +38,9 @@ const VirtualizedListInner = <T,>({
   }, []);
 
   // Bring scrollToIndex into view if outside the visible range. Stale indexes
-  // (e.g. selection survived a list shrink) are silently ignored.
+  // (e.g. selection survived a list shrink) are silently ignored. Sync the
+  // scrollTop state explicitly: relying on the browser-fired scroll event
+  // can be racy in rare cases.
   useEffect(() => {
     if (scrollToIndex == null || scrollToIndex < 0 || scrollToIndex >= items.length) return;
     const el = containerRef.current;
@@ -47,10 +49,12 @@ const VirtualizedListInner = <T,>({
     const bottom = top + itemHeight;
     const viewTop = el.scrollTop;
     const viewBottom = viewTop + containerHeight;
-    if (top < viewTop) {
-      el.scrollTop = top;
-    } else if (bottom > viewBottom) {
-      el.scrollTop = bottom - containerHeight;
+    let next: number | null = null;
+    if (top < viewTop) next = top;
+    else if (bottom > viewBottom) next = bottom - containerHeight;
+    if (next != null && next !== viewTop) {
+      el.scrollTop = next;
+      setScrollTop(el.scrollTop);
     }
   }, [scrollToIndex, itemHeight, containerHeight, items.length]);