Yoshihiro OKUMURA
df2c671844
The README still described the Create React App scaffold and mixed the release history into the same file. - Document the current stack, requirements, project structure, routes, data model, and build output - Move the release history to CHANGELOG.md and add entries for 3.0.0, 3.0.1, and 3.0.2
4.9 KiB
CelLoc-3D
React single-page application for celloc3d.brain.riken.jp.
CelLoc-3D is a database of the 3D arrangement of neocortical cells (glutamatergic/excitatory, GABAergic/inhibitory and/or astrocytes) identified in vivo in layer 2/3 of the primary visual cortex of the mouse by two-photon imaging. The application provides dataset search, dataset detail pages, downloadable data files, and a WebGL-based 3D viewer.
Tech Stack
| Area | Technology |
|---|---|
| Build tool | Vite 8 with @vitejs/plugin-react |
| Language | TypeScript 7 |
| UI | React 19, CSS Modules |
| Routing | React Router 7 (react-router-dom) |
| State management | Redux Toolkit, React Redux |
| HTTP client | ky |
| 3D rendering | three.js |
| Document head | @dr.pogodin/react-helmet |
| Analytics | react-ga4 |
| Lint / format | Biome |
| Spell check | CSpell |
Requirements
- Node.js
^20.19.0or>=22.12.0(required by Vite 8) - npm
Getting Started
Install the dependencies and start the development server:
npm install
npm run dev
Open http://localhost:5173 to view the application.
Available Scripts
In the project directory, you can run:
npm run dev
Runs the app in development mode with hot module replacement.
Open http://localhost:5173 to view it in the browser.
npm run build
Type-checks the project with tsc -b and builds the app for production into the dist folder.
The build is minified and the filenames include content hashes.
npm run preview
Locally preview the production build.
npm run lint
Run the Biome linter and apply the available fixes.
npm run lint:check
Check for code quality issues without making changes.
npm run format
Run Biome formatter, linter, and import sorting, and apply the available fixes.
npm run format:check
Run the same checks without making changes.
npm run spell:check
Run CSpell over the project files.
Project Structure
.
├── index.html # Vite entry HTML
├── vite.config.ts # Build configuration and manual chunk splitting
├── biome.json # Formatter and linter configuration
├── cspell.json # Spell checker dictionary
├── public/
│ ├── data/ # Per-dataset .dat, .json, and .png files
│ └── images/
└── src/
├── index.tsx # Application entry point
├── App.tsx # Layout, navigation, routes, GA initialization
├── app/ # Redux store and typed hooks
├── assets/ # data.json (dataset index), news.json
├── features/ # Feature components, each with its own CSS Module
└── utils/ # Shared helpers
Routes
| Path | Component | Description |
|---|---|---|
/ |
News |
Landing page with news entries |
/search |
SearchForm |
Dataset search form |
/search/results |
SearchResults |
Search results list |
/data/:name |
DataDetail |
Dataset detail and downloads |
/data/:name/viewer |
DataViewer |
three.js 3D viewer |
/help/* |
Help |
Help pages |
/contact |
Contact |
Contact information |
* |
CompatRedirect |
Redirects legacy .html and CGI URLs, otherwise renders NotFound |
CompatRedirect maps the URLs of the previous static site (for example /Search.html, /Help_S1.html,
/DB/TE/TE0001.html, and /cgi-bin/SearchResult.cgi) to their current equivalents.
Data Model
The dataset index is bundled from src/assets/data.json and is keyed by dataset name. Each entry holds the
postnatal day (pd), recordingVolume, imagingDepth, cellType, area, cellNum, expDate, releaseDate,
geneType, and remark fields. src/features/data/DataUtils.ts exposes exists(name) and search(params)
over this index.
Per-dataset files are served statically from public/data/:
| File | Purpose |
|---|---|
<name>.dat |
Cell coordinate data loaded by the 3D viewer |
<name>.json |
Dataset metadata shown on the detail page |
<name>.png |
Preview image |
Build Output
vite.config.ts targets es2023 and splits vendor code into three chunks: vendor (React and React DOM),
three (three.js), and vendor-lib (remaining dependencies).
Code Quality
Biome handles formatting, linting, and import sorting. The configuration uses the recommended rule preset with the React domain enabled, single quotes, trailing commas, two-space indentation, and a line width of 120.
CSpell checks spelling across the project. Project-specific vocabulary and ignored paths are maintained in
cspell.json.
The .vscode/settings.json file registers Biome as the default formatter and enables source.fixAll.biome on
save.
Changelog
See CHANGELOG.md for the release history.