A modern science portal for the SKA Regional Centre Network (SRCNet), built on the same design principles as the CANFAR Science Portal. It provides data staging from the SKA Science Archive, multi-site compute selection, and distributed file management across SRC sites—with SKAO brand identity (Blueshift Navy, Redshift Magenta) and a clean, user-friendly interface for both novice and expert users.
# Clone the repository
git clone https://github.com/drtobybrown/portal_ui.git
cd portal_ui
# Install dependencies
npm install
# Start development server
npm run devThen open http://localhost:3000 in your browser (or the port shown in the terminal if 3000 is in use).
| Technology | Purpose |
|---|---|
| Next.js 14 | React framework with App Router |
| Tailwind CSS | Utility-first styling |
| Lucide React | Icon library |
| TypeScript | Type safety |
| Color | Hex | Usage |
|---|---|---|
| Blueshift Navy | #070068 |
Primary buttons, sidebar, brand |
| Redshift Magenta | #E70068 |
Accents, highlights, CTAs |
| 100% Black | #000000 |
Text, dark surfaces |
Additional accent palettes (Science, Technology, Sites) are defined in tailwind.config.ts for charts and thematic elements.
- Font: Noto Sans (via Google Fonts), with Verdana as fallback per SKAO brand guidelines.
- Personalized greeting with SRCNet system status
- SRC Network Status — Quick view of compute/storage across top SRC sites
- Data Staging Activity — Active and recent staging requests from the SKA Science Archive to SRC sites
- Resource overview (CPU/RAM gauges, storage)
- 24-hour resource history charts
- Active sessions list with site and project
- SKA Science Archive search (ALMA-style interface)
- As-you-type search by target, project code, observation ID, or coordinates
- Filters: telescope (SKA-Mid / SKA-Low), data quality
- Expandable observation rows (coordinates, frequency coverage, data products)
- Bulk select and stage data to any SRC site (Canada, Spain, UK, Germany, Australia, South Africa, China, Sweden)
- Overview of all SKA Regional Centre sites
- Per-site status, latency, CPU/RAM/storage usage
- Provider and location for each SRC
- File Browser — Navigate project and home storage with copy, move, mkdir, upload, delete
- Terminal — POSIX-like commands:
ls,cd,pwd,mkdir,cp,mv,rm - CANFAR CLI integration —
canfar auth login,canfar ps,canfar stats(modeled on opencadc/canfar) - Site selector to switch context between SRC sites
- Cross-site file transfer panel
- Quick Launch — Template cards (SKA Data Analysis, CARTA, Desktop, CASA) + SRC site selector
- Custom Configuration — Full config with compute site (Canada, UK, Australia, South Africa, Spain, Germany, China, Sweden), container image, CPU/RAM/GPU, env vars
- CLI equivalent preview (
canfar create --site ...)
- Grid view of active sessions with SRC site and project
- Batch jobs and cluster queue views
- Project and home storage browser
- Storage quota visualization
- Job queue monitoring
- Job submission (with site context)
- Status and logs
- Platform and job performance dashboards
- Time range selector
- Profile, notifications, security (SKAO IAM), API access
- Architecture Summary — Technical architecture, data flow, and extension points (if present).
├── app/
│ ├── layout.tsx # Root layout (Noto Sans, SRCNet metadata)
│ ├── page.tsx # Dashboard (SRC status, staging activity)
│ ├── archive/ # SKA Science Archive search & staging
│ ├── sites/ # SRC Network status
│ ├── files/ # File Manager (browser + terminal)
│ ├── sessions/ # Sessions & batch jobs
│ ├── storage/ # Data & storage
│ ├── batch/ # Batch processing
│ ├── builder/ # Container image builder
│ ├── metrics/ # Monitoring dashboards
│ └── settings/ # User settings
├── components/
│ ├── dashboard/ # Dashboard components
│ ├── layout/ # Sidebar, Header (SKAO logo)
│ ├── session-launcher/ # Session launch modal (with site selector)
│ └── ui/ # Reusable UI (SKAO logo, badges, etc.)
├── lib/
│ ├── dummy-data.ts # Mock SRC sites, archive, staging, sessions
│ └── utils.ts # Utilities
└── tailwind.config.ts # SKAO brand colors & theme
npm run dev # Start development server (http://localhost:3000)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run validate # Type-check + lint + format check- Usability first — Works for both novice and expert users.
- Progressive disclosure — Advanced options (custom image, fixed resources, env vars) in Custom mode.
- Multi-site by design — Choose where to stage data and run compute (8 SRC sites).
- CLI-aligned — Session launcher and file manager reflect canfar CLI concepts (auth, create, ps, stats) for consistency.
This is a UI prototype with mock data. It demonstrates the SRCNet Gateway experience: SKAO branding, archive search and staging, multi-site compute, and file operations across SRCs.
- SRCNet/SKAO rebrand (colors, typography, logo)
- Dashboard with SRC status and data staging activity
- Data Archive page with search, filters, and stage-to-SRC
- SRC Sites overview (8 sites)
- File Manager (browser + terminal with ls/cd/canfar commands)
- Session launcher with SRC site selection
- Sessions, storage, batch, metrics, settings pages
- Responsive layout
- Connect to SKA Science Archive and staging APIs
- Authentication (SKAO IAM / OAuth)
- Real canfar CLI or SRCNet backend for sessions and file ops
- Real-time session and staging status
- SKAO Brand — Colours, typography, logo usage
- SKAO — SKA Observatory
- CANFAR CLI — Auth, create, ps, stats, etc.
- ALMA Science Archive — Archive UI reference for data staging
This project extends the CANFAR Science Portal UI for SRCNet. Please coordinate with the maintainers before making large changes.
Internal use — SRCNet / SKA Observatory.