# Isabl UI

A fresh, sleek front-end for the Isabl genomics platform. It replaces the legacy
`isabl_web` (Vue 2) with a modern stack and a single-page **Explorer** experience
for navigating the interdependent data models — Individual → Sample → Experiment →
Analysis — without page reloads.

> This is **Phase 1** (explore-first MVP): auth, dashboard, the Explorer workspace
> with a slide-in Inspector, plus Projects and Applications. Create/edit,
> submissions, IGV and analytics are intentionally out of scope for now.

## Stack

- **React 19 + TypeScript + Vite 6**
- **Tailwind CSS v4** with a CSS-first design-token system (white surfaces, an
  azure-blue scale, **no panel borders** — depth comes from soft shadows)
- **TanStack Query** (server cache, no reloads) + **TanStack Table**
- **Radix UI** primitives, hand-authored shadcn-style components
- **Framer Motion** for the Inspector slide-in and subtle transitions
- **Zustand** for light UI state (explorer scope/entity + the inspector back-stack)
- Fonts: **Geist** / **Geist Mono**

## Getting started

```bash
nvm use 20            # Node >= 20.19 required
npm install
cp .env.example .env  # set VITE_API_HOST to your running isabl_api
npm run dev           # http://localhost:5173
```

### Configuration

The app resolves the API base URL in this order:

1. `VITE_API_HOST` (a `.env` value, best for local dev)
2. `window.$isabl.apiHost` in `index.html` (the deploy-time contract, mirrors
   `isabl_web` so ops configuration is unchanged)
3. `http://localhost:8000` (default)

Auth uses token authentication against `/api/v1/rest-auth/login/`; the token is
persisted in `localStorage` and any `401` from the API bounces the session to the
login screen.

## Scripts

| Script              | Purpose                          |
| ------------------- | -------------------------------- |
| `npm run dev`       | Start the Vite dev server        |
| `npm run build`     | Type-check and build for production |
| `npm run typecheck` | `tsc -b` only                    |
| `npm run preview`   | Preview the production build      |

## Structure

```
src/
  components/ui/        shadcn-style primitives (button, card, tabs, select, …)
  components/shell/     AppShell, SideNav, Logo, PageHeader
  config/models.ts      per-entity columns, status colors, labels, icons
  features/
    auth/               login + auth context (token verify/login/logout)
    dashboard/          KPI cards, status donut, recent activity
    explorer/           ScopeBar · EntityTable · Inspector (the workspace)
    projects/           project picker (scopes the Explorer)
    applications/       pipeline catalog
  lib/
    api/                fetch client, auth, typed resource helpers, stats
    query/              QueryClient + TanStack Query hooks
    config.ts           runtime config resolution
```