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

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