Skip to content

Commit b51b3cb

Browse files
committed
add readme
1 parent 739f3f1 commit b51b3cb

1 file changed

Lines changed: 134 additions & 0 deletions

File tree

README.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# neuDiff
2+
3+
A (very simple) comparative visualization tool for exploring and comparing cell type pages from existing Cell Type Catalogues. This tool does not provide any new data, just basically shows two windows side-by-side.
4+
5+
## Overview
6+
7+
**neuDiff** is a static webpage that enables side-by-side comparison of cell types from neuroscience datasets. It provides an interactive interface for researchers to examine morphology, connectivity, and other properties of different cell types, either within the same dataset or across different datasets.
8+
9+
## Features
10+
11+
- **Side-by-Side Comparison**: View two cell type pages simultaneously in split-screen mode.
12+
- **Cross-Dataset Compatibility**: Compare cell types from different Janelia Cell Type Catalogues.
13+
- **Flexible Selection**: Compare different cell types within the same dataset, the same cell type across different datasets, or any combination thereof.
14+
- **URL State Management**: Share specific comparisons via URL parameters.
15+
- **Responsive Design**: Optimized for wide monitors. No fallback for smaller screens.
16+
17+
## Getting Started
18+
19+
### Prerequisites
20+
21+
This is a static web application that requires only a modern web browser. No build process or dependencies are needed.
22+
23+
### Installation
24+
25+
1. Clone the repository:
26+
```bash
27+
git clone <repository-url>
28+
cd neudiff
29+
```
30+
31+
2. Serve the files using any static web server. For example:
32+
```bash
33+
# Using Python 3
34+
python -m http.server 8000
35+
36+
# Using Node.js http-server
37+
npx http-server
38+
```
39+
40+
3. Open your browser and navigate to `http://localhost:8000`
41+
42+
### Usage
43+
44+
1. Select a dataset from the **Dataset A** dropdown menu
45+
2. Choose a cell type from the **Cell Type A** dropdown
46+
3. Select a dataset from the **Dataset B** dropdown menu
47+
4. Choose a cell type from the **Cell Type B** dropdown
48+
5. The interactive visualizations will appear side-by-side
49+
50+
Click the **neuDiff** button in the top-left corner at any time to reset your selections and return to the welcome screen.
51+
52+
## Implementation
53+
54+
### Architecture
55+
56+
neuDiff is built as a lightweight, client-side web application with the following structure:
57+
58+
```
59+
neudiff/
60+
├── index.html # Main HTML structure
61+
├── scripts/
62+
│ └── main.js # Core application logic
63+
├── styles/
64+
│ ├── plume-all.css # UI framework styles
65+
│ └── main.css # Custom styles
66+
└── assets/
67+
└── images/ # Image assets
68+
```
69+
70+
### Key Components
71+
72+
#### Dataset Registry
73+
74+
The application uses a dataset registry pattern to manage available datasets:
75+
76+
```javascript
77+
datasetRegistry.add(
78+
"Dataset Name",
79+
"https://base-url-to-dataset/"
80+
);
81+
```
82+
83+
Default datasets include:
84+
- Male CNS
85+
- Female Adult Fly Brain
86+
87+
#### Dynamic Content Loading
88+
89+
Cell type data is dynamically fetched from the respective dataset repositories. The application:
90+
1. Parses JavaScript files from the source datasets to extract neuron type definitions
91+
2. Builds an index of available cell types
92+
3. Generates preview URLs for iframe embedding
93+
4. Handles cross-origin resource loading
94+
95+
#### State Management
96+
97+
- URL parameters encode the current selection state
98+
- Format: `?datasetA=<name>&celltypeA=<type>&datasetB=<name>&celltypeB=<type>`
99+
- Enables sharing specific comparisons via URL
100+
101+
### Technologies Used
102+
103+
- **HTML5**: Semantic markup and structure
104+
- **CSS3**: Styling with Plume CSS framework
105+
- **Vanilla JavaScript**: No framework dependencies for maximum compatibility
106+
- **Iframes**: For embedding cell type pages
107+
108+
## Adding New Datasets
109+
110+
To add a new dataset to neuDiff:
111+
112+
1. Register the dataset in `scripts/main.js`:
113+
```javascript
114+
datasetRegistry.add(
115+
"Your Dataset Name",
116+
"https://url-to-your-dataset/"
117+
);
118+
```
119+
120+
2. Ensure the dataset follows the Janelia Cell Type Catalogue structure with:
121+
- A `neuron_data.js` file containing cell type definitions
122+
- Individual cell type pages accessible via predictable URLs
123+
124+
## Authors
125+
126+
- Frank Loesche (https://github.com/loeschef) - Initial development and implementation
127+
128+
## License
129+
130+
This project is licensed under the GNU General Public License v3.0 (GPL-3.0) - see below for details.
131+
132+
## Display Recommendations
133+
134+
neuDiff works best on wide monitors where both cell types can be viewed side-by-side. For smaller screens or tablets, consider opening different cell type pages in separate browser tabs for optimal viewing.

0 commit comments

Comments
 (0)