Add dashboard for explore data

.devcontainer/devcontainer.json

@@ -0,0 +1,33 @@
+{
+  "name": "Python 3",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+  "customizations": {
+    "codespaces": {
+      "openFiles": [
+        "README.md",
+        "dashboard/streamlit-css.py"
+      ]
+    },
+    "vscode": {
+      "settings": {},
+      "extensions": [
+        "ms-python.python",
+        "ms-python.vscode-pylance"
+      ]
+    }
+  },
+  "updateContentCommand": "[ -f packages.txt ] && sudo apt update && sudo apt upgrade -y && sudo xargs apt install -y <packages.txt; [ -f requirements.txt ] && pip3 install --user -r requirements.txt; pip3 install --user streamlit; echo '✅ Packages installed and Requirements met'",
+  "postAttachCommand": {
+    "server": "streamlit run dashboard/streamlit-css.py --server.enableCORS false --server.enableXsrfProtection false"
+  },
+  "portsAttributes": {
+    "8501": {
+      "label": "Application",
+      "onAutoForward": "openPreview"
+    }
+  },
+  "forwardPorts": [
+    8501
+  ]
+}

.github/workflows/deploy.yml

@@ -0,0 +1,79 @@
+name: Deploy React Dashboard to GitHub Pages
+
+on:
+  push:
+    paths: [ 'dashboard/**' ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: 'dashboard/package-lock.json'
+
+      - name: Install Python dependencies
+        run: |
+          cd dashboard
+          pip install pandas numpy minio pyarrow fastparquet
+
+      - name: Prepare data from MinIO
+        env:
+          MINIO_ENDPOINT_URL: ${{ secrets.MINIO_ENDPOINT_URL }}
+          MINIO_ACCESS_KEY: ${{ secrets.MINIO_ACCESS_KEY }}
+          MINIO_SECRET_KEY: ${{ secrets.MINIO_SECRET_KEY }}
+        run: |
+          cd dashboard
+          python prepare_data.py
+
+      - name: Install dependencies
+        run: |
+          cd dashboard
+          npm ci
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Build
+        run: |
+          cd dashboard
+          export BASE_PATH=/slcomp/
+          npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'dashboard/dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/streamlit'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -49,7 +49,7 @@ Tabular data and processed image cutouts are available for download.
   <img src=".figures/minio_service.gif" width="90%" alt="Animated GIF of data download from the MinIO service" />
 </p>
 
-➡️ **[MinIO Service Link](https://e4d6-152-84-248-250.ngrok-free.app/login)**
+➡️ **[MinIO Service Link](https://ruggedly-quaky-maricruz.ngrok-free.app/login)**
 **Instructions & Examples:**
 * Data access instructions: **[Data Access Notebook](./notebooks/how_to.ipynb)**.
 * Additional example notebooks (database exploration, proposal planning): `notebooks/` folder, including **[Proposal Planning Notebook](./notebooks/proposals/proposals.ipynb)**.

dashboard/.gitignore

@@ -0,0 +1,22 @@
+node_modules/
+dist/
+.DS_Store
+*.log
+*.cache
+
+# Local env files (never commit secrets)
+.env*
+!.env.example
+
+# Generated data files
+public/data/*.json
+
+# Vite / TypeScript build artifacts
+tsbuildinfo.tsbuildinfo
+
+# Editor
+.idea/
+.vscode/
+
+# Coverage / tests (future)
+coverage/

dashboard/README.md

@@ -0,0 +1,34 @@
+# LaStBeRu Dashboard
+
+Interactive dashboard for exploring astronomical lens data.
+
+## Features
+* Sky map
+* Filtering
+* Data & consolidated parameter tables
+* Image cutout gallery
+
+## Quick Start
+```bash
+npm install
+npm run dev      # http://localhost:5173
+```
+
+## Data Files (place in `public/data/`)
+| File | Purpose |
+|------|---------|
+| `database.json` | Main dataset |
+| `consolidated_database.json` | Consolidated dataset |
+| `cutouts.json` | Image cutout metadata |
+| `dictionary.json` | Reference dictionary |
+
+## Theming
+Edit `src/theme.ts` (palette, breakpoints, shadows, transitions).
+
+
+## Scripts
+```bash
+npm run dev    # Start dev server
+npm run build  # Production bundle
+npm run lint   # ESLint
+```

dashboard/eslint.config.js

@@ -0,0 +1,28 @@
+export default [
+  {
+    ignores: ['dist/', 'node_modules/', '*.config.js'],
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: await import('@typescript-eslint/parser').then(m => m.default),
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': await import('@typescript-eslint/eslint-plugin').then(m => m.default),
+      'react-hooks': await import('eslint-plugin-react-hooks').then(m => m.default),
+      'react-refresh': await import('eslint-plugin-react-refresh').then(m => m.default),
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  },
+];

dashboard/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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:; object-src 'none';" />
+    <title>The LaStBeRu Explorer</title>
+    <link rel="icon" type="image/png" href="/telescope.png" />
+    <style>
+      body { 
+        background: radial-gradient(circle at 20% 20%, #13242d 0%, #091015 60%, #060b0f 100%); 
+        margin: 0;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+      #root { min-height: 100vh; }
+      ::-webkit-scrollbar { width: 10px; }
+      ::-webkit-scrollbar-track { background: #0d171d; }
+      ::-webkit-scrollbar-thumb { background: linear-gradient(#274753,#1b3038); border-radius: 5px; }
+      ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#2f5c6b,#23404a); }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>